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本 书 以 图 像 处 理 与 合成 软件 Photoshop CC 为 设计 工具 ， 对 主流 网 页 设 
计 流 程 和 制作 技巧 进行 了 全 面 、 细 致 的 剖析 。 

本 书 共 10 章 。 包 括 网 站 UI 概述 、Photoshop 基本 操作 、 网 站 页 面 UI 
配色 、 网 站 页 面 布局 与 版 式 设计 、 网 站 页 面 图像 的 优化 与 调整 、 网 站 基本 
元 紊 设计、 网 站 导航 设计 、 网 站 广告 设计 、 移 动 端 网 站 UI 设计、 计算 机 
端 网 站 UI 设计 。 将 实用 的 技术 、 人 快捷 的 操作 方法 和 丰富 的 内 容 介 绍 给 用 
户 ， 使 用 户 在 掌握 软件 功能 的 同时 ， 提 高 网 页 设计 效率 和 从 业 素 质 。 

本 书 配 套 全 部 实例 的 素材 、 源 文件 和 教学 视频 ， 可 以 通过 扫描 封底 二 
维 码 获得 。 

本 书 适合 UI 设计 爱好 者 、APP 界面 设计 从 业者 阅读 ， 也 适合 作为 各 
院 校 相关 设计 专业 的 参考 教材 ， 是 一 本 实用 的 APP 界面 设计 操作 宝典 。 
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如 今 互联 网 已 经 成 为 了 人 们 生活 中 不 可 或 缺 的 一 部 分 。 同 时 网 页 设计 也 开始 被 人 欢 多 的 企 
业 所 重视 ， 这 就 为 网 页 设计 人 员 提 供 了 很 大 的 发 展 空间 。 从 事 相 关 工 作 的 人 员 ， 则 必须 要 营 
握 必 要 的 操作 拉 能 ， 以 满足 工作 的 需要 。 

作为 目前 非 弟 流行 的 网 页 设计 软件 一 一 Photoshop， 人 和 凭借 其 强大 的 功能 和 易学 易 用 的 特 
性 ， 深 受 广 大 设计 师 的 喜爱 。 

内 容 安排 

本 书 共 分 为 10 章 ， 米 用 基础 指示 与 应 用 实例 相 结 合 的 方法 ， 循 序 渐进 地 向 用 户 介 绍 了 
移动 新 和 网 页 靖 网 站 UI 设计 方法 ， 以 下 是 每 章 中 所 包含 的 主要 内 容 . 

第 1 章 网 站 UI 概述， 主要 介绍 了 什么 是 网 站 UI、 网 站 UI 设计 原则 、 网 页 构成 元 素 、 局 
平 化 在 网 页 UI 中 的 应 用 、 移 动 新 与 计算 机 靖 网 页 UI 区 别 和 网 页 设计 命名 规 泡 等 。 

第 2 章 Photoshop 基本 操作 ， 主 要 介绍 了 Photoshop 基本 操作 、 图 像 的 复制 与 粘贴 、 图 像 
裁剪 、 图 像 变 换 和 还 原 与 恢复 操作 等 。 

第 3 章 网 站 页 面 UI 配色， 主要 介绍 了 色彩 的 基础 知识 、 色 彩 在 网 页 视 党 设计 中 的 作用 、 
色彩 的 联想 、 配 色 标 准 、 色 彩 中 的 功能 角色 、 配 色 技 巧 和 配色 风格 等 。 

第 4 章 网 站 页 面 布 局 与 版 式 设 计 ， 主要 讲解 了 移动 新 和 计算 机 疡 网 页 布局 方式 、 网 页 分 
割 方式 ， 以 及 网 页 布局 设计 的 连贯 性 和 多 样 性 等 。 

第 5 章 网 站 页 面 图 像 的 优化 与 调整 ， 主要 介绍 了 网 站 中 的 图 像 处 理 、 修 复 网 页 中 的 素材 
图 像 、 调 整 图 像 色彩 、 调 整 图 层 的 应 用 和 批 处 理 命令 等 。 

第 6 章 网 站 基本 元 素 设 计 : 主要 介绍 了 图 标 、 按 钮 和 LOGO 的 制作 以 及 形状 工具 和 图 层 


杆 式 的 应 用 等 。 
第 7 章 网 站 导航 设计 : 主要 介绍 了 什么 是 网 站 导航 、 网 站 导航 形式 、 导 航 位 置 和 网 站 设 
计 的 辅助 操作 等 。 


第 8 章 网 站 广告 设计 : 主要 介绍 了 什么 是 网 站 广告 条 、 抠 图 工具 的 使 用 、 修 边 操 作 、 男 
笔 工 具 和 蒙 版 工具 的 使 用 等 。 

第 9 EBAY UI 设计， 主要 讲解 了 2 款 移动 疾 页 面 界 国 的 详细 制作 步 坚 ， 包 括 移 
动 端 网 店 销售 界面 和 移动 端 企业 网 站 界面 设计 。 

第 10 章 计 算 机 靖 网 站 UI 设计， 主要 讲解 了 2 款 计 算 机 站 页 面 界面 的 详细 制作 步骤 ， 包 
E A ENL ETAR aT o 

KEFA 

本 书 内 容 全 面 、 结 构 清 晰 、 实 例 新 入。 采用 理论 知识 与 操作 实例 相 结 合 的 教学 方式 ， 全 
面 问 用 户 介绍 了 不 同类 型 元 素 的 处 理 和 表现 的 相关 知识 ， 以 及 所 需 的 操作 技巧 。 

。 通俗 易 懂 的 语言 

本 书 采 用 通俗 易 懂 的 语言 ， 全 面向 用 户 介绍 移动 只 和 计算 机 痛 网 站 UI 设计 所 需 的 基础 
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知识 和 操作 技巧 ， 综 合 实 用 性 较 强 ， 确 保 用 户 能 够 理解 并 掌握 相应 的 功能 与 操作 。 

o 基础 知识 与 操作 实例 结合 

本 书 按 弃 了 传统 教科 书 式 的 纯 理论 式 教 学 ,采用 基础 知识 与 操作 实例 相 结 合 的 讲解 
Io 

e 技巧 和 知识 点 的 归纳 总 结 

本 书 在 基础 知识 和 操作 实例 的 讲解 过 程 中 ， 列 出 了 大 量 的 提示 和 和 技巧， 这 些 信息 都 是 结 
合作 者 长 期 的 UI 设计 经 验 与 教学 经 验 归 纳 出 来 的 ， 可 以 帮助 用 户 更 准确 地 理解 和 掌握 相关 
的 知识 点 和 操作 技巧 。 

多 媒体 辅助 学 习 

为 了 增加 用 户 的 学 习 渠 道 ， 增 强 用 户 的 学 习 兴 趣 ， 本 书 配 有 多 媒体 教学 内 容 。 在 教学 内 
容 中 提供 了 本 书 中 所 有 实例 的 相关 素材 和 源 文 件 ， 以 及 书 中 所 有 实例 的 视频 教学 ， 使 用 户 可 
以 跟 看 本 书 做 出 相应 的 效果 ， 并 能 够 快速 应 用 于 实际 工作 中 。 

RAMAS 

本 书 适合 网 页 UI 设计 爱好 者 ， 想 进入 UI 设计 领域 的 朋友 ， 以 及 设计 专业 的 大 、 中 专 学 
生 阅读 ， 同 时 对 专业 设计 人 士 也 有 很 高 的 参考 价值 。 和 希望 通过 对 本 书 的 学 习 ， 能 够 早日 成 为 
优秀 的 网 页 UI 设计 师 。 

本 书 由 张 晨 起 执笔 ， 另 外 张 晓 景 、 刘 强 、 备 权 国 、 王 明 、 王 大 远 、 刘 钊 、 张 艳 飞 、 杨 
H, TER, H, ASA EWR, FRR, TE. Bla. HE. HA. SM. REA 
350355 ANDAS TA APÁÉSPELERIA)ME, BTR, ol ZN AER 
免 ， 望 广大 用 户 批 评 指正 。 


编 者 


1,2 


l3 


1.4 


1.5 


网 站 UI 概论 1 

初 识 网 站 UL oeeeeeeeertererrrrrsrrrrrrrsrrrrrerrrrrrerrerrererrerrerrnrrerrnrerrrrrerrererrereeer: 2 
wiil E E A a ESA 7 
LLO MINO apta bil ca ) 
1.1.3 网 页 界面 的 设计 特点 4 
BU ET E E G E EEA 7 
1.2.1 视觉 美观 7 
1.2.2 突出 主题 8 
1.2.3 EME cerro 8 
1.2.4 为 用 户 考虑 9 
1.2.5 快速 加 载 E O gn EN E 10 
A e EE 10 
1.3.1 文字 ererersrsrrsrerrrrrrrrrerrrererrrererrrrrrnrsrerererererereserrsrererererererereren: 11 
1.3.2 图 像 11 
1.3.3 超 链接 corro 12 
1.3.4 多 媒体 12 
全 14 
1.4.1 图 标 rre rro rro rre rre errar earn 14 
1.4.2. fpf rr 15 
1.4.3 H 角 人 15 
1.4.4 徽章 rersssrrrrrissrrrrrrrnsrrrrrrrerrrrrrnnerrrrrnrerrrerrrerrrrrnrrrererereererereets 16 
1.4.5 Z% rr 16 
EE E 16 
1.4.7 装饰 元 素 rr 17 
1.4.8 装饰 背景 17 
A E ed TE 18 
1.5.1 界面 不 同人 18 
LAT AER ar A A AA 18 
1.5.3 操作 习惯 不 同 eertrrrrrrrrrrrrrrrrrrrrrrrrrrrr rr 18 
1.5.4 按钮 状态 不 同和 18 


A 网 站 UI 设计 第 版 oO 





ES 19 
Lo TED a EE ri E E RÁN E T S 19 
人 20 
LITA MIA si Ran 20 
LTD HARE LES. AR AAA A 20 
A e E 21 
1.8.1 本 章 小 结 和 21 
1.8.2 举一反三 DES UL dt 21 
eaa m o Ea E 23 
2.1 什么 是 Photoshop 有 24 
pA Photoshop 的 安装 和 启动 界面 or E OE aa al o 24 
Sa Ee e E E E 24 
19 Photoshop 的 基本 操作 ro OT TT TE E E E laa 26 
TO E 26 
BD. IFA ri AAA AAA 28 
TA MAS E 29 
SHA] ME Di eee ma e 30 
pi O N A E E a EEE 33 
9 953 VABER rr dd UA 34 
2.3.6 修改 画布 大 小 和 35 
SOL AA OT 35 
Aa a e ae Eo 1 E E 37 
E 37 
网 页 天 38 
HAD AM spas trop tro 39 
El ARENAS anni 40 
2.4.3 AS, 41 
E AMEN espectro cia jota topo ie e 42 
人 43 
2.5.1 A EE 43 
2.5.2 AÑADA cat A 44 
2.5.3 BALA T NA IA AA A 44 
o S a A E E E E E 45 
01 l an atenta 45 
16D TA rn EE NA 45 
.63 a ri AA AS A AAN 46 





实例 


Ze 1 


2.8 


2:9 


第 3 章 


L2 


3.3 


3.4 


O E A 46 
2.6.5 HAJA eeeeerssserererererrrrrrererurererrerererererrerererererrerrrerererereereres 47 
IS 47 
a E EE E A EE E E 49 
APO 本 49 
> a A E E EEE 49 
IT ARES E ra pda tia 49 
EX SR - CT OT E E 50 
E E A E a S a E 50 
A WE O 50 
E T E E T 51 
2.9.1 本 章 小 结 eereeserersrrrrrrrersrsrerrrrrrrirrrerrrererrrrrnreeerrerrrrrrrererrereees 51 
2.9.2 举一反三 一 一 制作 简单 的 网 页 按钮 51 
oa A OS 52 
ee PP O O O E EE E E 53 
WE 53 
3.1.2 色彩 视觉 54 
LLS DA a sea 55 
3.1.4 色彩 的 种 类 57 
A o E o y E E 58 
ley y zo ESE PERE 59 
Sal AO O esp eE 59 
3.2.2 划分 视觉 区 域 rrrrrrrrrrrrrnnnnrrnn 60 
3.2.3 AI HA eeerrereerssrerereerrsereerrrrrenrnereserssrerereererenereeererrns 60 
3.2.4 增强 网 页 艺术 性 61 
色彩 的 联想 作用 与 心理 效果 61 
3.3.1 色彩 的 冷 肯 eeeerssrrrrrrrererrrrrrrrrererrrsrerrrrrerrrrerrrererererurerererererereu: 61 
3.3.2 色彩 的 软 硬 srererrrerrrrrrererrrrrrrrrrrerrrererrrrrrrrrrrrrrerererererererererererte: 62 
3.3.3 色彩 的 大 小 rr 63 
3.3.4 色彩 的 轻重 oeeeerssserererererrrrrrrrrererrrererrrrrerrrrrrrrererererirerererererereu: 63 
3.3.5 色彩 的 活 小 和 端庄 cert 63 
3.3.6 色彩 的 兴奋 和 沉稳 感 nn rr 64 
3.3.7 色彩 的 华丽 和 朴素 感 rrrerrrrrerrrrirerrrrerrrrrsrrrrrrerrerrrrreerrererrrereret: 64 
mmda e 65 
> 65 
3.42 使 用 Web 安全 色调 色 板 于 65 


A 网 站 UI 设计 第 版 oO 


a a T E A E E E E 66 
sa O ir RAE EO A E 66 
e T 66 
53 WE ad ena ii oo 67 
3.5.4 E Ø rerrsersrserrererrrrerrererrereerersererresersereererersersererrerrerersrsersese 67 

se M E A E E 67 
se E ear E E A E 68 

E 二 让 区 70 
< E 
363 AA EE eA E 74 

El a T spp A ESAE 75 

3T MADAME SM E rta nr 81 
> DUE sor pos ost ro 81 
aTa AE eise a na a an ae a g2 
3.7.3 ”饱和 度 影响 配色 82 

A e E E T g3 
9 1 六 人 83 
3.8.2 和 根据 色彩 联想 选择 网 页 配色 84 
3.8.3 根据 受众 色彩 偏好 选择 网 页 配色 ee 85 
3.8.4 根据 生命 周期 选择 网 页 配色 87 

和 89 
二 的 89 
OO 89 

AR a A o E 90 
O AA 90 
3102 LR -=—— BERE MEE 页 rra nana cnn nac rn nc 90 

E | S o eeano aooaa aiana ao dan aan aana 91 

AL TRENDS RA da rd O AA 92 
4.1.1 网 页 布局 的 目的 92 
ADE E e 92 

E AATA ES A a e Ee a EE a aer 93 
3 93 
LO AMA rip 94 
ADE IEA a da 94 
LIA PRE a E ERE E AA EEA 95 
ADS ET rra ua 95 





a 95 
ADO AE a ei 96 
E AMES AAA rr 06 
4.2.8 Flash 型 和 AAA AR DA AAA ARS ASADA AAA 102 
4.3 移动 痕 网 页 布局 方式 errrrrrrrrrrrrrrrrrn rr 103 
ASi 到 全 于 汪 epN T E E a 103 
Aaa AIT NA OT 104 
EE r E E T 105 
Boa a 108 
AA D S AA E AS EER EE SE E 108 
AAI E epi EEA T a E E a 108 
AAI AA A 全 109 
下 二 AnA A eeen td eaS 109 
Ee DE EC E 111 
SL At dopo ron 116 
AS HR MN 和 122 
ASA [AÑ A rs at A a aa 122 
15D REA Mi on pa 123 
外 123 
4.5.4 满 屏 的 网 页 布局 eererrerererrerrrrsrrererererrerrerererrnrererrereerererrererereer: 124 
LG 页 而 入 症 | 124 
直人 124 
dea Aa eei a E E E EE 125 
AGS AA de IA EE AEAEE EEEE EEE EEEE E 125 
sI BEBER OE E E 126 
43 Mara E AE aE O 127 
EI AS rt pr taa 127 
Aoi MR MO tn dani oie 128 
Aoa MIS O Soria ies 128 
LLO HE ir ip ao A iaa 128 
4. 10.1 本 章 小 结 128 
4. 10.2 举一反三 一 制作 简洁 网 页 登陆 界面 crrtrrrrrrrrrrrrrrrnnnrnnrrrrrannnnnnes 128 
ea e m oda a eaaa a 130 
ST e serrat api 131 
STE MA A in 131 
SAD MEP) ii A nn 132 


AUW aurii 第 2 版 《一 


5.2 图 章 工 具 的 使 用 a ETES TEETE TE T ET EE E EE E ETTET EE 133 
s31 a o APEE Eo E E a 133 
LA ”去除 网 页 中 的 水 印 效 时 133 
5.2.2 图 案 图 章 工具 的 应 用 135 
e o o III 136 
5.3.1 污点 修复 和 画笔 工具 136 
SE OT EE 136 
5.3.2 修复 和 画笔 工具 138 
5.3.3 RPE E 139 
5.3.4 内 容 感 知 移动 工具 139 
S35 a e ee E E S Taa EE E aE 140 
EE a merda aia 140 
A 140 
5.4.2 上 和 目 动 对 比 度 rr 140 
5.4.3 自动 颜色 人 141 
5.5 手动 调整 图 像 色 彩 ce rrrrrrrrrrrrrcrrrrrrrrrrrrn nr rre 141 
5.5.1 亮度 /对 比 度 srrerererrrrrrrrrrrrrrrrrrrrrrerererrrrererrrsrrrrerreererrererererrere: 142 
E AS, 142 
5.5.2 色 阶 AAA IA ASAS AAN ANA IA 145 
5.5.3 曲线 146 
Su 国人 147 
5.5.4 Él 然 饱 和 度 od de EEEE 149 
SE a A e eea E EE E ES 150 
5.5.5 色相 /饱和 度 ER 153 
5.5.6 阴影 /高 光 TE OT N E EAA E E 153 
sl E e e e 154 
5.6 填充 和 调整 图 层 a a tia 158 
5.6.1 纯色 填充 图 层 a AN 1S8 
5.6.2 渐变 填充 图 层 0 1S8 
5.6.3 图 和 案 填充 图 层 有 159 
SOT 批 处 理 coco 160 
5.7.1 动作 Se 160 
5.7.2 Él 定义 动作 和 161 
5.8 专家 支 招 rr 161 
5.8.1 如 何 提 高 图 像 清 晰 度 EE I E E EE E E 161 
5.8.2 如 何 处 理 扫 措 图像 162 
KE r E 162 





5.9.1 本 章 小 结 CEO OR E E E E E A E 162 
5.9.2. 举一反三 一 E AS 162 
Ep 164 
ei EITE aeee EE PEERAA E E E 165 
全 165 
612 BRENT POE rn is AN 166 
o A EO EAEE 166 
632 E e e tac tata 167 
62i A AS 167 
sa ARE a tiene 168 
人 171 
和 171 
Sl lt MANE restar 172 
A a A E E E E EE 174 
ss Pa a 174 
人 176 
GOT a 
人 178 
MERE a e 180 
TE E e 180 
bd Hi teatro ed dde 184 
6 让 1 A UT o A a e A 184 
6.4.2 斜面 和 浮雕 de 185 
E | RE Eb piro 186 
EE A Ue O y T E aT 189 
GAA a a T 189 
A o A E a A a A E E 190 
人 191 
6.4.7 HEr, Prine BAE jei ana iesin 191 
Ea AS 191 
人 195 
六 195 
人 0 196 
6.5.3 网 站 LOGO 表现 形式 196 
A AE UNS LOCO erre peace iento 197 
Ao 200 


A 网 站 UI 设计 第 2 版 oO 





606.1 Bird sE tias lp E 200 
6.6.2 LOGO ETE RAZA oem 200 
U a E E T 200 
ES 201 
6.7.2 举一反三 简约 网 页 按钮 201 
A A 202 
a EE EAE E 203 
LA MSI EE ran T 203 
7.3 ”网 站 导航 的 设计 标准 203 
7.4 网 站 导航 形式 eeeeeerererrerrerrrrrrerrrerrerrrrrrerrerererrsrrerrrerrerererrerrrrrrerrereret 204 
了 还 了 A AA eei iiia aot 204 
TAD A ld a ia 204 
IAEA EA E E 205 
7.4.4 无 边框 形式 correr 205 
7. el e ARR a n a E N 205 
7.4.6 E ERAS 206 
A A AS 206 
7.5 网 站 导航 位 置 rr 209 
二 209 
A r E E E 209 
TaS (PO 210 
a a 210 
PAA A AE E a Ea Ee E EE REES 213 
7.5.5 中 心 了 导航 aria AAA AN 213 
La Mii IE ae ts 214 
po a OR TO TT S 214 
7.6.2 创建 精确 参考 线 Ne 214 
SE e EP oo 215 
DT O es piletas prosa 218 
7.7.1 E ESA AS 218 
7.7.2 交互 式 导 航 的 优 热 和 发热 219 
gO E E 219 
7.8.1 ES 219 
7.8.2 举一反三 一 一 制作 游戏 网 站 导航 栏 e eererrrreererrrrrerrrerrrrereeen 219 
Ea aa a 221 
O EE A A 222 


一 人 人 | o 





000 H = 


:本国 222 
ARE PEA pe 224 
8.1.3 广告 条 常见 尺 可 Ne 226 
SLI MEP tdi 227 
时 /加 228 
A 仆人 全 231 
SD Hi E ni ie 231 
A S E A 23 
ge 235 
FE oa 235 
A E E e E E A E T EE E 236 
8.2.5 快速 蒙 版 工具 LA A ER AAA ARA A 236 
人 236 
ES AE) E A E A E A E ES 236 
23 T C o 236 
E MA A rs o pte EEE 236 
$8.4 ”画笔 工具 237 
人 237 
8.5.1 使 用 图 层 蒙 版 替换 局 部 图 像 和 238 
8.5.2 使 用 图 层 蒙 版 融合 图 像 rrrrrrrrrrrrrrrrnnnnrnrrrnnr nn 238 
8.5.3 4M IRJA e eerrerrrrrrrerrrrrrrerrerrererrerrerrrrrrrerreererrerrererererenri 238 
Sg 239 
LT isa 239 
8.6.2 网 站 广告 的 表现 形式 有 哪些 239 
人 240 
SOT a poor 240 
TA a a S 240 
zoa gon e 241 
站 242 
A SS DAD 
9.1.2 色彩 分 析 人 242 
e o A o 242 
Se o ae O EU 245 
0 248 
oo A TT E E E 250 
O e E 25] 


AUW aurii 第 2 版 《一 








9.2.2 色彩 分 析 rrerrerrrrrrrrrerrrrrrerrrerrerrerrrrrrerrensrenrerrrerrerrenrreererrees 251 
SI AS 251 
SI a a E E reeerrerrerrrrrrerrerrrerrerrrerrrrrrrrrerrererer: 254 
ET 257 

9.3.1 响应 式 设计 是 否 适 合 于 专题 设计 RN 257 

9.3.2. 先 做 计算 机 端 页 面 还 是 手机 端 页 面 和 257 
E o a E E E E 258 

9.4.1 ES 258 

9.4.2 EA AS 258 

E A AO A AS 259 
LS E A enata 260 
10.1.1 界面 分 析 eeeereerresrerrrerrrsrrsrrrrrrrrrenrrnrrrrrrnrrerrererrerenrernrerreent: 260 
10. 1.2 色彩 分 析 rr 260 
La HAER E RS 260 
Sa a a aa TR E 263 
A E 267 
w2 A A e ea e e aaeain 268 
10.2.1 界面 分 析 rr 268 
10.2.2 ØR OPT rr 269 
SE] AA GINA AA O Y Mp topa 269 
Sl TAN hA ARI E Ea AAEE S EE EA 274 
0 277 
10.3.1 设计 网 页 之 前 二 要 以 作 入 dyed 277 
10.3.2 网 页 设计 的 发 展 荡 执 是 作用 277 
o E E E E E EA 277 
和 277 
10.4.2 RBD t A A A ARAS coronan nn 577 





网 站 UL 概述 


网 站 是 指 在 因特网 上 根据 一 定 的 规则 ， 通 过 HTML (4 
准 通用 标记 语言 下 的 一 个 应 用 ) 编译 代码 和 UI 设计 等 内 容 制 
作 的 用 于 展示 特定 内 容 相 关 网 页 的 集合 。UI PP User Interface 
(APRO) 的 简称 。 网 站 UI 设计 则 是 指 对 网 页 的 人 机 交互 、 
操作 逻辑 、 页 面 美观 的 整体 设计 。 好 的 网 页 UI 设计 不 仅 是 让 
页 面 变 得 有 个 性 、 有 品味 ， 还 要 让 页 面 的 操作 变 得 和 舒适、 简 
单 、 自 由 ， 充 分 体现 网 站 的 定位 和 特点 。 
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UI 的 本 意 就 是 用 户 界 面 。 为 了 使 人 机 交互 更 为 和 谐 ， 就 需要 设计 出 符合 人 机 操作 的 简 
易 性 和 合理 性 的 用 户 寞 面 ， 们 此 拉 近 人 机 之 间 的 距离 。 在 网 络 高 度 发 达 的 今天 ， 界 和 面 设计 工 
作 也 越 来 越 受到 重视 ， 一 个 美观 的 网 页 会 给 人 们 审 来 舒适 的 视 帝 享受 和 操作 体验 ， 是 建立 在 
科学 拉 术 基础 上 的 乙 术 。 


1.1.1 什么 是 网 页 界面 


通俗 而 言 ， 一 张 网 页 就 是 一 个 HTML 格式 的 文档 ， 这 个 文档 又 包 侣 文字 、 图 片 、 声 首 和 
动 男 等 其 他 格式 的 文件 ， 这 张 网 页 中 的 所 有 元 系 被 存储 在 一 合 与 因特网 相连 接 的 计算 机 中 。 
当 用 户 发 出 浏览 这 张 页 面 的 请 求 时 ， 就 由 这 合计 算 机 将 页 面 中 的 元 素 发 送 至 用 户 的 计算 机 
中 ， 再 由 用 户 的 浏 抽 亏 将 这 坚 元 素 按 照 特 定 的 排列 方式 显示 出 来 ， 就 形成 了 用 户 看 到 的 
网 页 。 

作为 上 网 的 主要 依托 ， 网 页 变 得 越 来 越 重要 ， 网 页 注重 的 是 排版 布局 和 视 党 效果 ， 最 终 
给 每 位 浏览 者 提供 一 种 布局 合理 、 视 觉 效 果 强 、 功 能 强大 并 且 实 用 简单 方便 的 界面 ， 如 
1-1 所 示 为 设计 精美 的 网 页 界面 。 
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1.1.2 网 页 界面 的 分 类 


网 页 中 的 基本 元 素 是 相对 单一 的 ， 如 文本 、 图 像 、 音 频 和 视频 等 ， 但 网 员 中 所 包含 的 具 
体 信 息 却 包罗 万 象 。 网 页 界面 根据 具体 内 容 和 风格 的 不 同 ， 大 致 可 以 分 为 三 大 类 型 : 环境 性 
界面 、 情 感性 界面 和 功能 性 界面 。 


任何 一 部 互动 设计 作品 都 无 法 肪 离 环 境 而 存在 ， 周 边 环境 对 设计 作品 的 信息 传递 有 看 特 
殊 的 影响 ， 包 括 经 济 、 文 化 、 科 技 、 时 事 政治 、 历 史 、 民 族 、 宗 教 信仰 和 风俗 习惯 等 ， 
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此 ， 营 造 界面 的 环境 氛围 是 不 可 忽视 的 一 项 设计 工作 。 如 图 1.2 所 示 为 两 款 环境 性 网 页 界 
面 。 网 页 界面 设计 也 会 受到 社会 环境 和 主流 文化 的 直接 影响 ， 网 站 页 面 的 风格 、 版 式 和 内 容 
青 况 下 才能 被 接受 。 


只 有 在 顺应 社会 主流 文化 和 符合 大 众 需求 的 ， 














此 处 的 情感 性 并 不 是 指 网 页 内容， 而 是 通过 配色 与 板式 的 挫 配 ， 构 建 出 强烈 的 情感 须 





围 ， 引 起 人 们 在 情感 上 的 强 膝 共 吗 ， 从 而 被 牢 牢 记 住 ， 如 果 一 款 网 页 的 版 式 新 奇 独特 ， 配 色 


酒 泌 艳丽， 相信 也 会 被 浏览 者 所 认同 和 襄 爱 。 如 图 1-3 所 示 为 两 款 成 功 的 情感 性 网 页 界面 。 
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功能 性 界面 所 鼎 的 比例 很 大 ， 主 要 用 来 展示 产品 和 相关 信息 。 各 种 购物 网 站 以 及 公司 网 
站 基本 都 属于 功能 性 界面 。 一 款 优秀 的 功能 性 网 页 界面 应 该 能 使 浏览 者 快速 了 解 该 网 员 最 终 
的 目的 或 产品 信息 ， 并 能 根据 需求 快速 检索 到 需要 的 信息 ， 如 图 1-4 所 示 。 
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1.1.3 网 页 界面 的 设计 特点 


网 络 日 益 发 展 的 今天 ， 单 纯 的 文字 和 数字 网 页 已 经 不 复 存 在 了 ， 取 而 代 之 的 是 形式 和 内 
容 上 极其 丰富 的 页 和 面 。 网 页 界面 设计 也 具有 了 统一 的 设计 特 点 ， 并 且 兼 备 了 新 时 代 的 亏 术 
下 二 


网 页 不 同 于 传统 媒体 之 处 ， 就 在 于 信息 的 动态 更 新 和 即时 的 交互 性 。 即 时 的 交互 性 是 
Web 成 为 热点 的 主要 原因 ， 也 是 网 页 设计 时 必须 若 虑 的 问题 。 传 统 媒体 都 以 线性 方式 提 
供 信息 ， 即 按照 信息 提供 者 的 感觉 、 体 验 和 事先 确定 的 格式 来 传播 。 而 在 Web 环境 下 ， 
人 们 不 再 是 一 个 传统 媒体 方式 的 被 动 接 受 者 ， 而 是 以 一 个 主动 参与 者 的 身份 加 入 到 信息 
的 加 工 处 理 和 发 布 之 中 。 这 种 持续 的 交互 ， 使 网 页 己 术 设计 不 像 印 刷 品 设计 那样 ， 发 表 
之 后 就 意味 看 设计 的 结束 。 网 页 设计 人 员 必 须根 据 网 站 各 个 阶段 的 经 v 营 目标 ， 配 合 网 站 
不 同时 期 的 经 莒 策略， 以 及 用 户 的 反馈 信息， 经 常 对 网 页 进行 调整 和 修改 。 例 如 为 了 保 
持 浏览 者 对 网 站 的 新 鲜 感 ， 很 多 大 型 网 站 总 是 定期 或 不 定期 进行 改版 ,这 就 需要 设计 痢 
在 保持 网 六 视 沈 形 象 一 吐 性 的 基础 上 ,不 断 创作 出 新 的 网 页 设计 作品 。 如 图 1-5 所 示 为 网 
页 界面 交互 性 的 体现 。 
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多 维 性 产 于 起 链接 ， 主 要 体现 在 网 页 设计 中 对 导航 的 设计 上 。 由 于 超 链 接 的 出 现 ， 网 页 
的 组 织 结构 更 加 丰富 ， 浏 览 者 可 以 在 各 种 主题 之 间 自 由 跳 转 ， 从 而 打破 了 以 前 人 们 接收 信息 
的 线性 方式 。 例 如 可 将 页 面 的 组 织 结 构 分 为 序列 结构 、 层 次 结构 、 网 状 结构 、 复 合 结构 等 
但 页 面 之 间 的 关系 过 于 复杂 ， ne i al 来 了 
更 大 的 困难 。 为 了 让 浏览 者 在 网 页 上 迅速 找到 所 需 的 信息 ，? 
航 设 计 。 在 替 浏 览 者 考虑 得 很 周到 的 网 页 中 ， 导 航 提供 了 足够 的 、 o E miei 
者 在 网 页 的 各 个 部 分 之 间 跳 转 ， 并 告知 浏览 者 现在 所 在 的 位 置 、 当 前 页 面 和 其 他 页 面 之 间 的 
关系 等 。 而 且 每 页 都 有 一 个 返回 主页 的 按钮 或 链接， 如 果 页 和 面 是 按 层 次 结构 组 织 的 ， 通 彰 还 
有 一 个 返回 上 级 页 面 的 链接 。 对 于 网 页 设计 者 来 说 ， 和 面 对 的 不 是 按 顺 序 排 列 的 印刷 页 面 ， 而 
是 自由 分 散 的 网 页 ， 因 此 必须 考虑 更 多 的 问题 。 如 怎样 构建 合理 的 页 面 组 织 结构 ， 让 浏览 者 
对 你 提供 的 巨 量 信息 感到 有 条 理 ? 怎样 建立 包括 站 点 索引 、 帮 助 页 面 、 查 询 功 能 在 内 的 导航 
系统 ?这 一 切 从 哪儿 开始 ， 到 哪儿 结束 ? 如 图 1-6 所 示 为 网 页 界面 中 出 色 的 导航 页 。 
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HATO n A E ASA nR RALF, MR. FÈ, WME, ee 
增加 、 心 片 处 理 速 度 的 提高 ， 以 及 跨 平 台 的 多 媒体 文件 格式 的 推广 ， 必 将 促使 设计 者 综合 
a i A ， 以 满足 和 丰富 浏览 者 对 网 络 信 息 传 输 质 量 提 出 的 更 高 要 求 。 a 
前 国内 网 页 已 经 出 现 了 模拟 三 维 的 操作 界面 ， 在 数据 压缩 扩 术 的 改进 和 流 拉 术 的 推动 下 ， 
Internet 出 现实 时 的 音频 和 视频 服务 典型 的 有 在 线 音 乐 、 在 线 广播 、 网 上 电影 、 网 上 和 直播 

因此 ， 多 种 媒体 的 综合 运用 是 网 页 乙 术 设计 的 特 扣 之 一 ， 也 是 未 来 的 发 展 方 喇 ， 如 图 1- 
7 所 示 为 在 网 页 界面 中 应 用 动 男 和 视频 等 多 媒体 元 素 。 
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网 页 版 式 设计 与 传统 印刷 版 式 设计 有 看 极 大 的 差 寞 ,一 是 印刷 品 设计 者 可 以 指定 使 用 的 
纸张 和 油 垩 ， 而 网 页 设计 者 却 不 能 要 求 浏 览 者 使 用 什么 样 的 计算 机 或 浏 讽 茵 ， 二 是 网 络 正 处 
于 不 断 发 展 之 中 ， 不 像 印 刷 那 样 基本 具备 了 成 熟 的 印刷 标准 ， 三 是 网 页 设计 过 程 中 有 关 Web 
的 每 件 事 都 可 能 随时 发 生变 化 。 

网 络 应 用 处 在 发 展 中 ， 关 于 网 络 应 用 也 很 难 在 各 个 方面 都 制订 出 统一 的 标准 ， 这 必然 导 
致 网 页 版 式 设计 的 不 可 控制 性 。 其 具体 表现 为 : 一 是 网 页 页 面 会 根据 当前 浏 筑 器 窗口 大 小 自 
动 格式 化 输出 ， 二 是 网 页 的 浏览 者 可 以 控制 网 页 页 面 在 浏览 絮 中 的 显示 方式 ， 三 是 不 同 种 
类 、 版 本 的 浏览 饥 观 察 同一 个 网 页 页 面 ， 效 果 会 有 所 不 同 ， 四 是 用 户 的 浏览 喜 工 作 环境 不 
同 ， 显 示 效 果 也 会 有 所 不 同 。 

把 所 有 这 些 问题 归结 为 一 操 ， 即 网 页 设计 者 无 法 控制 页 面 在 用 户 新 的 最 终 显 示 效 果 ， 但 
这 也 正 是 网 页 设计 的 引入 之 处 。 如 图 1-8 所 示 为 在 不 同 版 式 下 的 网 页 界面 效果 。 


Lorem ipsum dolor sit amet slogan (H2) 
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设计 是 主观 和 客观 共同 作用 的 结果 ， 是 在 自由 和 不 自由 之 间 进 行 的 ， 设 计 者 不 能 超越 自 
身 己 有 经 验 和 所 处 环境 提供 的 客观 条 件 限制 ， 优 秀 的 设计 者 正 是 在 掌握 客观 规律 的 基础 上 得 
到 了 完全 的 自由 ， 一 种 想象 和 创造 的 自由 。 网 络 技 术 主要 表现 为 客观 因素 ， 艺 术 创意 主要 表 
现 为 主观 因素 ， 网 页 设计 者 应 该 积极 主动 地 掌握 现 有 的 各 种 网 络 技术 规律 ， 注 重 技术 和 艺术 


—o 0O 0 





网 站 UI 概述 


紧密 结合 ， 这 样 才能 穷尽 技术 之 长 ， 实 现 艺术 想象 ， 满 足 浏览 者 对 网 页 信息 的 高 质量 需求 。 
如 图 1.9 所 示 为 设计 精美 的 网 页 界面。 
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网 站 UI 设计 原则 





网 页 界面 是 展现 企业 形象 、 介 绍 产 品 和 服务 、 体 现 企业 发 展 战略 的 重要 途径 。 设 计 之 前 
首先 要 明确 设计 页 面 的 目的 和 和 用户 需 求 ， 从 而 规划 出 切实 可 行 的 设计 方案 。 成 功 的 网 页 设计 
应 该 是 根据 消费 者 的 需求 、 市 场 的 状况 和 企业 自身 的 情况 ， 以 “消费 者 ”为 中 心 ， 而 不 是 
以 “美术 ”为 中 心 进行 设计 规划 。 下 面 是 网 页 界面 的 设计 原则 。 


1.2.1 视 党 美观 
视觉 美观 是 网 页 设计 的 基本 原则 。 页 面 设计 首先 需要 引起 浏览 者 的 注意 ， 由 于 网 页 内 容 


的 多 样 化 ， 传 统 的 普通 网 页 设计 即将 被 淘汰 ， 取 而 代 之 的 是 融合 了 动画 、 交 互 设计 和 三 维 效 
果 等 多 媒体 形式 的 网 页 设计 ， 如 图 1-10 所 示 。 
> O 
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设计 网 站 页 面 时 ， 应 该 灵活 运用 对 比 与 调和 和、 对 称 与 平衡 、 市 奏 与 韵律 及 留 白 等 技巧 ， 
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空间 、 XF, 图 形 之 间 的 相互 联系 ， 建 立 整体 的 均衡 状态 ， 确 保 整 个 界面 效果 协调 统 
o BER. B, ASA, MIA AGA. BARRERA, AAE 
AAR, TA 小 表达 完美 的 设计 意境 。 


1.2.2 突出 主题 


网 页 界面 设计 表达 的 是 一 定 的 意图 和 要 求 。 AENA ARALAR, 
有 些 则 需要 采用 多 媒体 表现 手法 。 这 就 要 求 网 页 设计 不 仅仅 简练 、 清 晰 和 精确 ， 还 需要 在 吓 
显 乏 术 性 的 同时 ， 通 过 视觉 冲击 力 来 体现 主题 。 

为 了 达到 主题 鲜明 突出 的 效果 ， 设 计 师 应 该 充分 了 解 客 户 的 要 求 和 用 户 的 具体 需 
简单 明确 的 语言 和 图 像 ， 体 现 页 面 的 主题 ， 如 图 1-11 所 示 。 
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1.2.3 整体 性 


网 页 的 整体 性 包括 内 容 上 和 形式 上 两 方面 。 网 页 的 内 容 主 要 是 指 Logo、 文 字 、 图 片 和 和 
动 男 等 要 素 ， 形 式 则 是 指 整体 版 式 和 和 不同 内 容 的 布局 方式 ,一 款 合格 的 网 页 应 该 是 内 容 和 形 
式 高 度 统一 的 ， 如 图 1-12 所 示 。 
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为 了 实现 网 页 界面 的 整体 性 ， 需 要 做 好 以 下 两 方面 的 工作 。 

O 表现 形式 要 符合 主题 的 需要 

一 款 页 右 如 果 只 是 追求 过 于 花哨 的 表现 形式 ， 过 于 强调 创意 而 急 略 主要 内 容 
求 功 能 和 内 容 ， 却 采用 平淡 无 桔 的 表现 形式 ， 都 会 使 页 RAND. 内 有 将 二 省 有 机 地 
融合 在 一 起 ,才能 真正 设计 出 独 具 一 格 的 页 面 。 

O 人 确保 每 个 元 素 存 在 的 必要 性 

设计 页 面 时 ， 要 确保 每 个 元 素 都 有 其 存在 的 意义 ， 不 要 单纯 为 了 展示 所 袁 的 高 水 准 设计 
和 和 新 技术 ， 添 加 一 些 毫 无 意义 的 元 素 ， 这 会 使 用 户 感 到 强烈 的 无 所 适 从 感 。 


1.2.4 为 用 户 考 虑 


为 用 户 竹 虑 的 原则 实际 上 就 是 要 求 设 计 者 要 时 刻 站 在 浏览 者 的 角度 来 知 虑 ， 主 要 体现 在 


人 目的 就 是 吸引 浏览 者 使 用 ， 所 以 无 论 什 么 时 候 ， 都 应 该 谨 记 以 用 户 
为 中 心 的 观念 。 用 户 需 要 什么 ,设计 者 就 应 该 去 做 什么 。 即 使 一 款 网 页 界面 设计 得 再 具有 艺 
术 感 ， 那 也 是 失败 的 。 





依靠 美观 的 界面 ， 可 以 豚 引 浏览 者 ， 对 于 是 否 能 够 留 住 浏 览 者 ， 靠 的 是 网 站 中 的 各 种 功 
能 以 及 操作 流程 。 此 处 需要 遵循 3 次 单 击 原则 ， 任 何 操作 不 应 该 超过 3 次 单 击 ， 如 果 违 背 则 
会 导致 浏览 者 失去 耐心 ， 如 图 1-13 所 示 。 


制作 网 页 时 需要 考虑 用 户 的 带宽 。 对 于 当前 网 络 高 度 发 达 的 时 代 ， 可 以 考虑 在 网 页 中 加 
入 一 些 动画 、 音 频 、 视 频 和 插件 等 多 媒体 元 素 ， 借 此 塑造 立体 丰富 的 网 页 效果 ， 如 图 1-14 
所 示 。 


B o pt7 





| 1-13 图 1-14 
如 果 想 要 让 所 有 浏览 者 都 可 以 畅通 无 阻 地 浏览 页 面 内 容 ， 那 么 最 好 不 要 使 用 只 分 六 
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览 器 才 支 持 的 技术 和 文件 ， 而 是 采用 支持 性 较 好 的 技术 ， 例 如 文字 和 图 像 。 
1.2.5 快速 加 载 


aro 条 准则 。 就 现在 网 页 的 发 展 趋势 而 言 ， 比 重 最 大 
的 当 对 页 的 加 载 速度 ， 需 要 从 页 面 切 图 和 优化 存储 图 片 下 手 ， 能 够 通 
pre 尽量 不 要 切 网 ， 能 用 1 像素 平 铺 出 来 的 就 不 切 成 2 像素 ， 能 用 32 64% 
储 的 就 不 用 64 色 ， 如 图 1-15 所 示 。 
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段 复杂 而 
速 的 程序 ， 网 页 文件 会 被 传送 到 访问 者 的 计算 机 内 ， 然 后 浏览 右 把 这 pa HTML 代码 
翻译 ”成 图 文 并 成 的 网 页 
虽然 网 页 的 形式 与 内 容 不 相同 ， 但 是 组 成 网 页 的 基本 元 素 是 大 体 相同 的 ，_ 般 包含 广 
本 、 图 像 、 超 链接 、 动 男 、 首 频 和 视频 等 内 容 ， 如 图 1-16 所 示 为 一 球 包 仿 多 种 元 素 的 网 页 
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网 站 UI 概述 
1.3.1 文字 


文本 是 网 页 中 最 基本 的 构 扎 元素， 目前 所 有 网 页 中 都 有 它 的 身影 。 网 员 中 的 信息 以 文本 为 主 。 
文本 一 直 是 人 类 最 重要 的 信息 载体 与 交流 工具 ， 网 页 中 的 信息 也 以 文本 为 主 。 与 图 像 相 比 ， 文 本 
里 然 不 如 图 像 那 梓 能 够 很 快 引起 浏览 者 的 注意 ， 但 却 能 准确 地 表达 信息 的 内 容 和 舍 义 。 为 了 丰富 
文本 的 表现 力 ， 人 们 可 以 通过 文本 的 了 字体、 字号、 颜色 、 尺 纹 和 边框 等 来 展现 信息 。 

文本 在 网 页 中 的 主要 功能 是 显示 信息 和 超 链接 。 文 本 通过 文字 的 具体 内 容 与 不 同 格 式 来 
显示 信息 的 重要 内 容 ， 这 是 文本 的 直接 功能 。 此 外 ， 文 本 作为 一 个 对 象 ， 往 往 又 是 超 链接 的 
触发 体 ， 通 过 文本 表达 的 链接 目标 指向 相关 的 内 容 。 如 网 1-17 所 示 为 网 款 拥 有 大 段 文字 的 
网 页 界面 ， 从 图 片 中 可 以 看 出 ， 只 要 设计 得 当 ， 文 字 也 可 以 充满 设计 感 。 
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1.3.2 图像 


当前 网 页 设计 领域 可 谓 是 色彩 横行 ， 图 片 当道 ， 因 此 合理 使 用 和 人 处理 图 片 元 素 也 成 为 了 评判 
网 页 设计 的 重要 标准 。 依 托 移 进 的 图 片 讨 缩 技术 ， 可 以 在 保证 图 像 丰 富 的 同时 ， 又 压缩 到 了 一 个 
合适 的 体积 。 图 像 的 功能 是 提供 信息 、 展 示 作 品 、 疼 饰 网 页 、 表 现 风 格 和 超 链接 。 网 页 中 使 用 的 
RREZE GIF, JPEG, PNG 等 格式 ， 如 图 1-18 所 示 为 两 款 以 图 片 为 主 的 网 页 设计 。 
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1.3.3 ”起 链接 


网 页 中 的 链接 又 可 分 为 文字 链接 和 图 像 链接 ， 只 要 访问 者 用 鼠标 来 单 击 市 有 链接 的 文字 
或 者 图 像 ， 就 可 目 动 链接 到 对 应 的 其 他 文件 中 ， 这 样 才 使 网 页 能 够 链接 成 为 一 个 整体 ， 超 链 
接 也 是 整个 网 络 的 基础 。 如 图 1-19 所 示 分 别 为 文字 超 链 接 和 图 像 超 链接 。 
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1.3.4 多 媒体 


网 页 界面 中 的 多 媒体 元 系 主 要 包 打 CE 、 音 频 和 视频 。 这 些 多 巡 体 元 素 的 应 用 能 够 使 网 
页 喝 时 间 、 喝 炫 酷 ， 但 使 用 前 需要 确认 用 户 的 市 宽 是 合 能 够 快速 下 载 这 样 的 高 数据 量 。 不 要 
单纯 地 为 了 炫 灼 高 新 扩 术 而 降低 了 用 户 的 体验 ， 这 样 做 很 不 明智 。 


GIF 原意 是 “图 像 互 换 格 式 ”， 是 一 种 基于 LZW 算法 的 连续 色调 的 无 损 压 缩 图 像 格式 。 
它 不 属于 任何 应 用 程序 ， 目 前 几乎 所 有 相关 软件 都 文 持 它 。 在 网 页 中 使 用 动 男 可 以 有 效 地 吸 
引 浏 览 者 的 注意 。 由 于 活动 的 对 象 比 静止 的 对 象 更 具有 了 豚 引 力 ， 因 而 网 页 上 通 冲 有 大 量 的 动 
转 。 动 男 的 功能 是 提供 信息 、 展 示 作 品 、 闭 饰 网 页 和 动态 交互 。 如 图 1-20 所 示 为 使 用 GIF 
的 网 页 界面 效果 。 
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HTML 5 动画 有 三 种 实现 方式 : 一 是 canvas 代码 元 素 结合 JavaScript 语言 ， 二 是 纯粹 的 
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CSS3 3158 ( 暂 不 被 所 有 主流 浏览 强 支 持 ， 比 如 于 )， 三 是 CSS3 结合 Jquery 框架 实现 ， 如 
| 1-21 所 示 为 HTML 5 动 国 。 
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首 频 是 多 媒体 网 页 的 一 个 重要 组 成 部 分 。 当 前 存在 看 一 些 不 同类 型 的 声音 文件 和 格式 ， 
也 有 不 同 的 方法 将 这 些 声 音 添 加 到 Web 页 中 。 在 决定 被 添加 声音 的 格式 和 方式 之 前 ， 需 要 
芳 虑 的 因素 是 声音 的 用 途 、 声 音 文件 的 格式 、 声 音 文件 的 大 小 、 声 音 的 品质 和 剖 览 器 的 差别 
等 。 不 同 的 浏览 器 对 于 声音 文件 的 处 理 方法 是 非常 不 同 的 ， 役 此 之 间 很 可 能 不 兼容 。 

用 于 网 络 的 声音 文件 格式 非常 多 ， 常 用 的 是 MIDI、WAV、MP3 和 AIF 等 。 一 般 来 说 ， 
不 要 使 用 声音 文件 作为 网 页 的 背景 音乐 ， 那 样 会 影响 网 页 的 下 载 速度 。 可 以 在 网 页 中 添加 一 
个 链接 来 打开 声音 文件 作为 育 景 音乐 ， 让 播放 音乐 变 得 可 以 控制 。 


Ve 提示 


浏览 器 不 同 ， 处 理 声 音 文件 的 方式 也 会 有 很 大 差异 和 不 一 致 的 地 方 ， 最 好 将 声音 文 





件 添 加 到 Flash 3H, RERA SWF 文件 以 改善 一 致 性 。 





在 网 页 中 视频 文件 格式 也 非常 多 ， 常见 的 有 RealPlayer, MPEG, AVI, DivX 和 MP4 $, 
视频 文件 的 采用 让 网 页 变 得 非常 精彩 而 有 有 动感 。 网 络 上 的 许多 插件 也 使 同 网 页 中 插入 视频 
文件 的 操作 变 得 非常 简单 。 如 图 1-22 所 示 为 使 用 视频 插件 的 网 页 界面 设计 。 
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14 网 页 UI 中 的 扁平 化 





随 着 局 平 化 设计 风格 的 风靡 ， 局 平 化 风格 的 网 页 界面 越 来 越 多 ， 尤 其 是 在 许多 欧美 网 站 
中 部 应 用 了 局 半 化 设计 风格 ， 页 面 整 体 简 单 、 大 方 、 直 观 并 且 目 显 主 体 。 应 用 局 半 化 的 界面 
具有 良好 的 用 户 体验 和 交互 性 。 如 图 123 所 示 为 应 用 扁平 化 的 精美 网 页 界面 。 
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VW 提示 

扁平 化 完全 属于 二 次 元 ， 这 个 概念 最 核心 的 地 方 就 是 放弃 一 切 装饰 效果 ， 诸 如 阴 
影 、 透 视 、 纹 理 、 渐 变 等 能 做 出 3D 效果 的 元 素 一 概 不 用 。 所 有 元 素 的 边界 都 干净 利落 ， 
没有 任何 羽化 、 渐 变 ， 或 者 阴影 。 尤 其 在 手机 上 ， 更 少 的 按钮 和 选项 使 得 界面 干净 整 
弃 ， 使 用 起 来 格外 简洁 。 可 以 更 加 简单 、 直 接地 将 信息 和 事物 的 工作 方式 展示 出 来 ， 减 
少 认 知 障碍 的 产生 ， 


1.4.1 图 标 


图 标 在 网 页 中 只 占 很 小 的 位 置 ， 不 会 影响 到 网 页 的 整体 宣传 效果 ， 而 且 设 计 精 美的 图 标 
还 会 为 网 页 增色 不 少 。 由 于 图 标本 和 刁 的 优势 ， 几 乎 所 有 网 页 都 会 使 用 图 标 来 为 用 户 指 路 。 有 既 
提高 了 用 户 的 浏览 速度 ， 又 提升 了 网 页 界面 的 美观 程度 ， 如 图 1-24 所 示 。 
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1.4.2 折 角 


折 角 效果 顾名思义 就 是 让 网 页 或 者 网 页 当中 的 元 素 以 类 似 纸张 边 角 折 起 或 者 卷曲 的 效 
果 。 完 美 地 将 印刷 形式 和 网 页 相 结 合 ， 帝 给 浏览 者 美的 感受 。 折 角 的 网 页 应 用 广泛 ， 这 种 网 
页 界面 容易 让 人 联想 到 纸张 ， 可 以 与 主题 相 呼 上 应， 丰富 网 站 内 容 和 整体 结构 ， 如 区 1-25 
Frio 


WWEDSITE MAMIE 
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1.43 AH 


RATES AAA AAA RNA, MARIA RAMA. Æ 

网 页 设计 越 来 越 精美 的 今天 ， 圆 角 的 应 用 已 经 越 来 越 广泛 。 相 较 于 直角 的 尖锐 ， 圆 角 给 人 一 

种 圆润 的 感 总 。 使 浏 响 者 在 浏览 网 页 时 ， 在 视觉 上 有 一 种 舒适 和 平静 的 感 况 。 如 图 1-26 所 
示 为 两 款 合 理应 用 圆 角 的 网 页 设计 。 
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U 提示 
圆 角 在 网 页 中 并 不 是 能 够 随心 所 欲 地 大 量 使 用 的 ， 要 根据 网 页 需要 表达 的 内 容 和 风 





格 来 进行 匹配 。 
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1.44 徽章 


徽章 在 网 页 设计 中 的 主要 作用 是 吸引 用 户 注意 力 ， 一 般 用 作品 牌 的 宣传 ， 如 车 、 包 和 和 表 
的 标志 等 ， 并 且 可 以 传达 菏 些 重要 信息 ， 如 果 应 用 得 当 ， 会 得 到 意 想 不 到 的 效果 ， 如 
1 -27 所 示 为 两 款 汽车 标记 徽章 的 使 用 效果 。 
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1.45 条 纹 


条 纹 的 使 用 在 网 页 a 也 是 占 位 最 小 的 一 个 部 分 ， 但 却 经 常 出 现在 网 页 设 
计 中 。 条 纹 并 没有 其 他 元 素 那 么 耀眼 ， 但 却 可 以 在 不 经 意 间 提升 页 面 的 设计 水 平 ， 如 图 1.28 
PIR o 


在 海外 如 何 为 支付 宝 充 值 ? 
A 外 币 怎 么 存 人 “支付 宝 ”? 
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1.4.6 标签 


标签 在 网 页 中 的 应 用 并 不 广泛 ， 却 能 以 一 种 巧妙 的 方式 为 用 户 提 供 网 页 信息 。 需 要 在 标 
签 上 放置 一 个 标题 ， 就 可 以 突出 该 部 分 的 效果 ， 如 图 1-29 所 示 。 
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装饰 元 素 的 存在 是 很 有 意义 的 ， 多 数 网 页 通过 各 种 精美 的 装饰 元 素 进 行 点 级 ， 从 而 吸引 
浏览 者 停留 欣赏 ， 使 页 面 信 息 得 到 充分 宣传 ， 如 图 1-30 所 示 。 
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1.4.8 ”装饰 背景 


网 页 中 的 背景 元 素 也 属于 浅 饰 元 素 ， 多 数 网 页 都 需要 人 通过 各 种 精美 的 疙 饰 元 素来 护 缀 ， 
浏览 者 驻足 观看 ， 从 而 能 够 使 得 网 页 信息 得 到 充分 家 传 ， 如 各 1-31 所 示 。 
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(1 Sjem 党 网 页 UI 区 出 


移动 新 网 页 UI 与 计算 机 问 网 页 UI， 由 于 操作 的 姓 介 不 同 ， 手 指 与 鼠标 ， 这 是 一 个 很 大 
的 区 别 ， 从 而 造成 了 如 下 几 点 不 同 。 


1.5.1 界面 不 同 


移动 平台 上 的 界面 设计 保留 了 Web 的 核心 部 分 ， 更 加 简洁 ， 利 用 的 功能 按钮 更 易于 至 
Ro PDA UI 是 将 PC 病 的 一 些 内 容 进行 重组 ， 目 的 是 突出 移动 用 户 的 特 点 ， 优 移 突 出 用 
户 所 需要 的 一 些 信息 。 


1.5.2 位 置 不 同 


对 于 鼠标 ， 可 以 说 按钮 在 屏幕 中 的 任何 位 置 ， 对 于 操作 的 影响 都 不 是 很 大 ， 用 户 可 以 轻 
松 地 移动 鼠标 到 任何 想 去 的 位 置 ， 氮 击 任何 需要 的 按钮 。 因 此 ， 可 以 看 到 大 部 分 的 网 页 ， 为 
了 保证 网 页 界面 整体 的 美感 ， 一 般 都 将 按钮 放置 在 边缘 的 一 个 狭小 空间 内 。 

MAFFIAN UI[， 需 要 考虑 的 是 手机 的 使 用 环境 ,里 然 当前 手机 屏幕 尺寸 越 来 越 
大 ,但 用 户 玩 加 希望 单 手 就 能 操作 手机 ， 因 此 ， 为 使 用 者 设计 的 按钮 ， 通 剃 玩 多 地 在 屏 舌 下 
方 ， 或 左 石 手 大 拇指 能 控制 到 的 区 域内 。 


1.5.3 操作 习惯 不 同 


对 于 女 标 ， 通 党 会 有 单 击 、 双 击 和 和 石 键 这 几 种 操作 ， 因 此 在 计算 机 端 网 页 UI 中 ， 可 以 设 
计 右 键 菜单 和 双击 动作 等 。 而 对 于 于 机 靖 网 员 UI， 通 前 会 设计 点 击 、 长 按 、 清 动 甚至 多 点 触 
探 ， 因 此 可 以 设计 长 按 呼 出 菜单 、 疹 动 翻 页 或 切换 、 双 指 的 放大 缩小 以 及 双 指 的 旋转 等 。 

很 明显 ,设计 者 不 能 把 以 上 这 两 种 操作 习惯 混用 ,试想 一 下 如 果 手 机 应 用 中 出 现 右键 菜 
单 ， 或 者 网 页 中 出 现 多 扣 触 探 操作， 那么 浏览 者 会 有 怎 杆 的 体验 。 


1.5.4 按钮 状态 不 同 


对 于 计算 机 端 网 页 UI 中 的 按钮 ， 通 常 有 默认 状态 、 鼠 标 经 过 状态 、 鼠 标点 击 状态 和 不 
可 用 状态 。 而 对 于 手机 端 网 页 UI 中 的 按钮 ， 通 常 只 有 默认 状态 、 点 击 状态 和 不 可 用 状态 。 

因此 ， 在 计算 机 端 网 页 UI 中 ， 按 钮 可 以 与 环境 以 及 背景 更 加 和 谐 地 融 为 一 体 ， 不 必 担 
心 用 户 找 不 到 按钮 ， 因 为 当 用 户 技 不 到 的 时 候 ， 会 用 鼠标 在 屏幕 上 滑动 ， 这 时 按钮 的 鼠标 经 
过 状态 就 派 上 用 场 了 。 而 在 手机 靖 网 页 UI 中 ， 按 钮 需要 更 加 明确 ， 指 向 性 更 绎 ， 让 用 户 知 
道 什 么 地 方 有 按钮 ， 因 为 一 旦 用 户 氮 击 ， 触 发 按钮 的 事件 就 发 生 了 。 

计算 机 端 和 移动 端 输出 的 区 域 尺 寸 不 同 ， 这 同样 是 一 个 很 大 的 区 别 ， 目 前 主流 显示 器 的 
尺寸 通常 在 19 -24 寸 ， 而 主流 手机 的 尺寸 则 仅仅 为 5 -7 寸 。 这 个 不 同 造成 的 结果 是 在 计算 
机 端 网 页 UT 中 ， 可 以 尽量 多 地 把 内 容 放 进 首 页 ， 而 尽量 避免 更 多 的 层级 ， 一 般 类 的 网 站 ， 
基本 只 有 3 级 目录 ， 而 这 个 3 级 目录 是 建立 在 第 一 级 所 产生 的 子 目录 足够 多 的 情况 下 。 而 在 
手机 端 网 页 UI 中 ， 就 需要 更 多 的 层级 ， 因 为 不 可 能 在 第 一 个 页 面 里 放 入 无 限 多 的 内 容 ， 因 
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此 必须 给 用 户 一 个 更 加 清晰 的 操作 流程 ， 让 用 户 可 以 更 容易 知道 当前 的 位 置 ， 并且 很 容易 到 
达 自 己 想 去 的 页 面 。 因 此 map 在 手机 站 网 页 UI 中 的 重要 性 ， 要 比 计 算 机 站 网 页 UI 更 大 。 


1.5.5 信息 布局 不 同 


移动 端 所 有 的 模块 都 是 从 上 至 下 展开 ， 也 称 为 瀑布 流 。 好 处 是 页 面 内 容 较 多 时 ， 可 以 通 
过 手指 向 下 滚动 实现 翻 页 操作 ， 布 局 方式 逐渐 趋 于 统一 。 
而 PC 端的 布局 方式 因为 空间 充足 ， 相 比 移动 端 单一 的 “ 瀑 布 流 ” 布 局 方式 来 说 ， 就 显 
得 比较 多 种 多 样 了 ， 例 如 常用 的 T 型 布局 、 口 型 布局 和 POP 布局 方式 等 





网 由 设计 从 名 规 沁 





作为 完整 的 页 面 往往 包含 很 多 个 部 分 ,例如 Logo、 导 航 、Banner、 菜 单 、 主 体 和 版 底 
等 ， 使 用 Photoshop 设计 界面 时 ， 按 照 规定 的 准则 命名 图 层 或 图 层 组 ， 不 仅 有 利于 快速 查找 
和 修改 页 面 效 果 ， 还 可 以 大 幅 提 高 切 图 和 后 期 制作 的 工作 效率 ， 如 图 1-32 所 示 为 一 款 结构 
元 整 的 网 页 界面 设计 。 














Logo 导航 条 
Banner 
菜单 栏 
石 侧 主体 
主体 
版 底 





冬 1-32 





下 面 列举 了 一 些 党 用 的 CSS 标准 化 设计 命名 ， 在 使 用 Photoshop MINA, DNA 
文 名 来 命名 每 个 部 分 。 


J. header 标记 : logo 

AX. content/ container 广告 : banner 

JÆ: footer HAEA: main 

导航 : nav 热点 : hot 

142. sidebar 新 闻 . news 

栏目 . column TF: download 

页 面 外 围 控 制 整体 布局 宽度 : wrapper 子 导 航 : subnav 

AAP: left right center 有 菜单， menu 
登录 条 . loginbar FKA. submenu 


o 19 9 一 


YUO 网 站 UI 设计 第 2 版 O 


搜索 : search 小 技巧 ; tips 
友情 链接 . friendlink MEA: title 
页 脚 : footer 加 入 : joinus 
版 权 : copyright 18 9: guild 
滚动 . scroll 服务 . service 
AX. content EH. register 
标签 页 . tab 状态 : status 
文章 列表 : list 投票 : vote 

提示 信息 : msg 合作 伙伴 : partner 


EL 


通过 本 鞋 的 学 习 ， 相 信用 户 对 网 页 界面 设计 有 了 初步 了 解 。 在 日 后 的 设计 过 程 中 活 学 活 
用 ， 以 达到 理想 的 设计 效果 。 


1.7.1 网 站 建设 流程 
使 用 Photoshop 设计 和 制作 一 张 静 态 的 页 面 难度 并 不 大 ， 但 是 想 要 搭建 起 一 个 完整 的 网 


站 ， 并 保证 各 种 功能 都 能 够 正音 运行 ， 并 随时 更 新 页 和 面 中 的 信息 ， 就 不 是 短 时 间 内 可 以 做 到 
的 了 。 网 站 的 建设 和 维护 周期 很 长 ， 一 般 分 为 图 1-33 所 示 的 几 个 步骤 。 
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1.7.2 什么 是 虚拟 主机 


虚拟 主 机 是 在 网 络 服务 亏 上 划分 出 一 定 的 刘 盘 空间 供用 户 放置 站 氮 、 应 用 组 件 等 ， 提 傣 
必要 的 站 局 功能 、 数 据 存 放 和 传输 功能 。 虚 拟 主机 的 租用 类 似 于 房屋 租用 。 虚 拟 主机 也 叫 
“网 站 空间 ”， 就 是 把 一 合 运行 在 因特网 上 的 服务 咒 划 分 成 多 个 “虚拟 ”的 服务 荆 ， 每 一 个 
虚拟 主机 都 具有 独立 的 域名 和 完整 的 Internet 服务 器 功能 。 虚 拟 主 机 是 网 络 发 展 的 福音 ， 极 
大 地 促进 了 网 络 技术 的 应 用 和 普及 。 同 时 虚拟 主机 的 租用 服务 也 成 了 网 络 时 代 新 的 经 济 形 
Ho E 1-34 所 示 为 两 款 虚 拟 主 机 。 
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18 总 结 扩展 


在 对 网 站 UI 有 一 定 了 解 后 ， 下 和 面 通过 一 个 实践 练习 使 用 户 对 网 页 UI 有 一 个 初步 了 解 。 
1.8.1 本 章 小 结 

本 章 主 要 简单 介绍 一 些 网 站 搭建 与 网 页 设计 的 相关 基础 知识 ， 包 括 网 页 设计 的 定义 、 网 
页 设计 的 分 类 、 网 页 设计 的 准则 ， 以 及 网 页 的 构成 元 素 等 ， 简 单 地 了 解 这 些 知 识 有 助 于 更 好 
地 理解 网 页 设计 。 
1.8.2 举一反三 一 一 查看 手机 UI 界面 


本 实例 主要 为 了 激发 自身 的 创作 能 力 ， 通 过 排列 小 图 标 ， 创 作出 不 一 样 的 感 竞 ， 此 款 界 
面 没 有 固定 的 排列 方式 ， 只 要 做 到 有 艺术 感 和 美观 即 可 。 
源 文件 地 址 . 源 文件 \ 第 1 章 \ 查看 手机 UI 界面 . PSD 
视频 地 址 : 视频 \ 第 1 章 \ 查看 手机 UI 界面 . MP4 
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L 执行 “文件 > 打开 ”命令 , 打开 PSD 文件 ，: ”2. 在 打开 的 “图 层 ” 面 板 中 ， 点 击 隐 藏 “解锁 ” 


打开 “图 层 ” 面 板 ， 界 面 展 示 为 “解锁 ”图 层 组 。 ; 图 层 组 ， 界 面 展示 为 “2” 图 层 组 。 


HP 


时 间 + 天 气 


主题 国标 ' > > 和 主题 到 村 


za : 解锁 
— 


3. ARE 2” 
图 层 组 。 








$3 


Photoshop mh fE IF 


本 草 主 要 为 用 户 介 绍 关于 Photoshop 的 基础 知识 ， 其 中 包 
括 Photoshop CC2018 的 安装 、 图 像 的 复制 粘贴 、 变 换 图 像 、 
载 切 图 像 和 恢复 操作 等 内 容 。 通 过 本 齐 的 学 习 ， 使 用 户 对 
Photoshop CC2018 的 基本 操作 有 一 定 的 了 解 ， 为 日 后 学 习 UI 
UH TF MERA 
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什么 是 Photoshop 





Photoshop 简称 “PS”， 是 由 Adobe Systems 开发 的 图 像 处 理 软 件 。 Photoshop 主要 处 理 
以 像素 所 构成 的 数字 图 像 。 使 用 其 众多 的 编 修 与 绘图 工具 ， 可 以 有 效 地 进行 图 片 编辑 
le 


Photoshop 的 安 委 和 局 动 卉 面 





在 对 Photoshop 有 基础 了 解 后 ， 接 下 来 为 用 户 详 细 介 绍 该 软件 的 安 站 和 启动 过 程 。 


人 以 实例 Photoshop 的 安装 和 启动 


在 使 用 Photoshop 之 前 ， 需 要 首先 在 计算 机 上 安 浅 该 软件 。 本 书 中 所 有 实例 均 是 使 用 
Photoshop CC 2018 制作 的 。 


学 习 时 间 5 分 钟 


视频 地 址 视频 \ 第 2 章 \ Photoshop 的 安 丢 和 局 动 . mp4 





(1 首先 下 载 好 Adobe 公 | 
司 的 Adobe Creative Cloud : 
软件 ， 打 开 此 软件 注册 
Adobe ID， 登 录 后 如 图 2-1 | 
所 示 。 技 到 Photoshop CC : 
最 新 版 本 ， 鼠 标 单 击 “ 试 : 
用 ”按钮 ， 进 行 软件 下 
载 。 如 图 2-2 所 示 。 





(QD 正在 安装 Pholoshop CC (19%) 





首页 Apps 资源 
MALAEF Ex ESE 


Y HNMRRRTANES 


- 国 
HERE MA. PRADA 
Photoshop Csá 
HABLE 
> Illustrator CC 
AES ARE AMES FADE 
> InDesign CC 
识 计 和 和 氛 布 精 关 的 版 面 HAD 
i i Cc 
E A 








Eg eS 
NS Lig troom Classic CC 
LT TZ ligan) 过 用 于 点 面 电脑 
4 BER IÓ 


Dreamweaver CC 


FISE 


Muse EC 

HEREDIA AR, EMRASH 
而 。 PAE 

Animate CC and Mob le Device 
Packzging 

Fab Aib 45 TER G. AS 


与 风格 。 RAWE 
Character Animator CC 
ESFRMEDENRA 20 AE 


FIRTH 
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(0 有 软件 下 载 完 成 后 会 : 
自动 解压 ， 无 须 找到 安装 : 
包 手动 解压 ， 如 图 2.3 所 : 
示 。 当 下 载 的 软件 解压 完 : 
成 后 ，Adobe Creative Cloud \ 
会 继续 帮助 用 户 安装 Pho- 
toshop CC 软件 ， 如 图 2-4 : 


ATAR, 


(03 有 软件 智能 安装 结束 : 
JA, Adobe Creative Cloud : 
软件 内 会 显示 所 安装 的 软 : 
件 是 否 是 最 新 版 本 ， 是 否 : 
需要 更 新 ， 如 图 2-5 所 
示 。Photoshop CC 会 自动 : 
在 Windows 开始 有 荣 单 中 添 | 
央 捷 方式 ， 如 图 2- : 


DW 
6 所 示 。 





《04] 单 击 “ 开 始 ” 按 钮 ， 


选择 “所 有 程序 Adobe 
Photoshop CC 2018” A 
项 ， 如 图 27 所 示 。 弹 出 : 


Photoshop CC 局 动 界 面 ， 
如 图 2-8 所 示 。 


Ll == 


A 





所 有 此 用 三 序 EEES 


v 我 的 语 片 本 订 和 腊 魏 


Photashop CSA 
AS 
> Illustrator CC 
AE SA AA AD 
> InDesign CC 
ENTIERRO HAD 





GD FERR Pholushop CC (55%) 


首页 Apps 资源 ”发 现 





(QD 下 在 安装 Pholoshop CC (83%) 


首页 Apps 资源 
| 在 
| MALAEF Edi 


VHMRERTANLE 


Phatashap (55 
HAD 
> Illustrator CC 
似 奸 地 人 惊 取 的 等 国 和 图形 HD 
InDesign CC 
d 及 计 利 入 右 精 关 的 版 画 FAPA 








所 有 此 用 性 序 Ex 


WHMRFERTAIS 





mM Adobe Dreamweaver CS6 

国 Adobe ExtendScript Toolkit CS6 

43 Adobe Extension Manager CS6 

i Adobe Help 

图 Adobe Illustrator CC 2017 

E Adobe Illustrator CS6 (64 Bit) 

E Adobe Illustrator CS6 

加 Adobe InDesign CC 2017 
Adobe Media Encoder CC 2017 

E Adobe Photoshop CS6 (64 Bit) 

Adobe Premiere Pro CC 2017 
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国 Adobe Photoshop CS6 (64 Bit) » | 
A sanan ore 

因 Adobe photoshop CC 2018 

ec Google Chrome 

El HprSnap6.exe 


团 Adobe Illustrator CS6 








Administrator 


控制 面板 


设备 和 打印 机 


默认 程序 


帮助 和 支持 








正在 扫描 增 效 工具 





Photoshop 基 本 操作 





Photoshop 网 站 UI 设计 y a 


(00 引 有 箭 等 片刻 ， 弹 出 Pho- : 
toshop CC 的 初始 界面 ， 各 
图 2-9 所 示 。 








Photoshop 的 基本 扣 作 





在 学 习 Photoshop 各 项 功能 以 前 ， 首 先 需 要 掌握 一 些 关 于 该 软件 的 基本 操作 ， 如 新 建 和 和 
保存 文档 、 打 开 文 档 、 修 改 图 像 大 小 和 修改 国 布 大 小 等 。 
在 进行 创作 以 前 ， 必 须 先 学 会 如 何 创 建新 的 文档 。 在 Photoshop 中 ， 用 户 可 以 使 用 多 种 


操作 方式 新 建文 要 ， 如 使 用 菜单 售 令 或 快捷 键 等 
执行 “文件 > 新建” 命令， 或 者 按 快捷 键 Cal +N, 弹出 “新 建文 档 ” 对 话 框 ， 如 图 2-10 


O BS 
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EIFE Photoshop 基 本 操作 





所 示 。 用 户 可 在 此 对 话 框 中 指定 新 文件 的 “名 称 *、“ 尺 寸 *、“ 分 辩 率 ”和 “颜色 模式 ”等 
属性 。 设 置 完成 后 ， 单 击 “ 确 定 ” 按 钮 ， 即 可 完成 文档 的 创建 。 
O 名 称 :“ 名 称 ” 选 项 用 于 为 新 文档 命名 。 如 果 不 命 名 ， 则 会 按照 未 标题 - 1、 未 标题 
-2、 未 标题 -3 的 方式 顺序 进行 命名 。 
O 文档 类 型 “文档 类 型 ”选项 列表 中 存放 了 很 多 预先 设置 好 的 标准 文档 尺寸 ， 用 户 可 
以 根据 操作 需求 ， 选 用 不 同 的 预 设 尺寸 。 
O 存储 预 设 /删除 预 设 : 单 击 “ 存 储 预 设 ” 按 钮 ， 弹 出 “新 建文 档 预 设 ” 对 话 框 ， 如 
22-11 所 示 。 和 输入 预 设 的 名 称 并 选择 相应 的 选项 ， 可 以 将 当前 设置 的 文件 大 小 、 分 
辨 率 和 颜色 模式 等 创建 为 一 个 预 设 。 使 用 时 只 需要 在 “ 预 设 ”下 拉 列 表 中 选择 该 预 
设 即 可 ， 可 以 使 用 “删除 预 设 ”按钮 删除 预 设 ， 如 图 2-12 所 示 。 





O 好 使 用 项 


ERRAR 16 厘米 x 12 厘米 + 此 动作 不 能 


像素 /英寸 
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0 NE/5E: 宽度 /高 度 ” 选 项 用 于 设 定 新 文档 的 宽度 和 高 度 ， 读 者 需要 先 确 定 相 应 
的 单位 ， 例 如 厘米 、 像 素 等 ， 然 后 直接 在 文本 框 中 输入 具体 数值 即 可 。 

@ HZ: 该 选项 用 来 指定 图 像 的 分 辨 率 ， 下 拉 列 表 中 包 合 “像素 / 瑞 寸 ”和 “ 借 素 / 
厘米 ”两 个 选项 ， 读 者 可 根据 具体 需求 选用 不 同 的 选项 。 

@ HERK: 该 选项 用 于 设 定 图 便 的 色彩 模式 ， 下 拉 列 表 中 包括 “位 图 ”、“ 灰 度 ”、 
“RGB”“CMYK” 和 “Lab”5 种 可 选 模式 ， 不 同 的 颜色 模式 决定 文档 的 用 途 。 用 
户 还 可 以 从 “颜色 模式 ” 石 侧 的 列表 框 中 选择 色彩 模式 的 位 数 ， 分 别 有 “1 位 ”、“8 
位 ”“16 位 ”和 “32 位 ”4 个 选项 。 位 数 设 置 越 高 ， 图 像 的 显示 品质 会 越 高 ， 从 而 
对 系统 的 要 求 也 越 高 。 

O FZAD: 用 于 指定 新 文档 的 背景 颜色 ,如 “白色 ”、“ 背 景色 ”和 “透明 ”。 若 要 
自 定 义 新 文档 背景 色 ， 需 要 在 执行 “新 建 ” 命 令 前 ， 设 置 好 “工具 箱 ” 中 的 “背景 
色 ”， 然 后 执行 “文件 > 新 建 ” 人 命令， 在 “背景 内 容 ” 下 拉 列 表 中 选择 “背景 色 ” 
ana, 

O 图 像 大 小 : 主要 用 来 显示 新 建文 档 的 大 小 。 

@ 颜色 配置 文件 : 用 于 设 定 当前 图 像 文 件 要 使 用 的 色彩 配置 文件 。 

O ZRK: 该 选项 只 有 在 图 像 输 出 到 电视 屏幕 时 才 有 有 用。 计算 机 显示 器 显示 的 图 
像 是 由 方形 的 像素 组 成 。 只 有 应 用 于 视频 的 图 像 ， 才 会 变更 此 选项 。 
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在 Photoshop 中 要 编辑 一 个 已 有 的 图 像 ， 需 要 先 将 其 打开 。 打 开 文 件 的 方法 有 很 多 ， 可 


以 使 用 命令 打开 ， 也 可 以 使 用 快捷 键 打 开 ，i 还 可 以 直接 将 图 像 拖 入 软件 界面 打开 。 接 下 来 为 
用 户 介绍 几 种 种 用 的 打开 方式 。 


执行 “文件 > 打开 ”命令 ， 引出 “打开 ”对 六 杠 。 在 “打开 ”对 话 框 中 ， 可 以 对 “ 查 
找 沁 围 ”“ 文 件 名 ”和 “文件 格式 ”进行 设置 ， 如 图 2-13 所 示 。 


Mor 
€ Lo ， 计算 机 » SOFTWARE (D) » FREIE ， 





















组 织 





rs 





5 计算 机 Ei : a X R } : È sb 
Ca SEE (C) rm 
Ca SOFTWARE (0) 
ca MEDIA (E:) 
ca BACKUP (F;) 
PSD PSD 
Ou 网 络 





12.psd 未 标题 -2. 参考 经 psd 
¡Ml pC-20161017KY de pd € E 
¡Ml PC-201705185H 


¡Mi pC-20170323LE! | 

















XEEN): HEEE y [MARC Y 
Gra) [a 
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VW 提示 
要 打开 连续 的 文件 ， 可 以 单 击 第 1 个 文件 ， 然 后 按 下 Shift 键 ， 再 单 击 需 要 同时 选中 
的 最 后 一 个 文件 ， 单 击 “ 打 开 ” 按 钮 即 可 。 pt 去 的 文件 ， 按 住 Ctrl 键 ， 依 次 单 





击 要 打开 的 不 连续 文件 ， 单 击 “ 打 开 ” 按 钮 即 可 。 


在 不 同 的 操作 系统 间 传 递 文件 时 ， 可 能 会 出 现 无 ; 
格式 与 实际 格式 不 匹配 ， 或 文件 缺少 扩展 名 造成 的 。 

如 果 出 现 无 ; TT mo I E 
框 ， 选 中 文件 并 通过 “打开 ”对 订 框 为 其 指定 正确 的 格式 ， 如 图 2-14 所 示 。 





TA 是 由 于 文件 的 





























2-14 


EIFE Photoshop 基 本 操作 





当 在 Photoshop 中 进行 了 保存 文件 或 打开 文件 操作 时 ， 执行 “文件 > 最 近 打 开 文 件 ” 命 
令 ， 在 其 子 菜单 中 就 会 显示 出 以 前 打开 过 的 文件 ， 如 图 2-15 所 示 。 执 行 “ 编 辑 > 首选 项 > 
文件 处 理 ”命令 ， 可 以 设置 “近期 文件 列表 包含 ”的 数量 ， 如 图 2-16 所 示 。 























最 近 打开 文件 [) 0 1600meatl012jpg 
关闭 (C) mp 1 1600meat_101Ljpg 
关闭 全 部 Alt+Ctrl+V4 2 1600meat_1010.¡pg AER Adobe Camera Raw(C) 
UBH Bridge... shifttctltW | | 3 2900meat_1009pg H 32 ERS 1618 位 CU 
FRCS) cuis | | 4 1600meat 1008jpg 
存储 为 (A).… ts | | 
AD 6 1600meat_1006.pg 
Pa 22 | | 7 fbaebef2bd22c7803 

8 2277.11F 
SE) +| | 9 2267.11 
生成 + as 
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将 需要 打开 的 图 像 文 件 的 图 标 拖 动 到 Photoshop 应 用 程序 图 标 上 ， 可 以 在 运行 Photoshop 
的 同时 打开 图 像 文件 ， 如 图 2-17 所 示 。 


习 H 去 用 工作 区 
全 [会 局 中 ， EE vé ll PEREDA P 
文件 ( RRE EEN IRM ”帮助 (H) 


— 组 织 = ERA > 共享 = » a» 17) | 
+ H Adobe Photoshop CC 2015 打开 a 











199-1-1366x768 


2 
A 
a 
z 
全 
a 
(J 
» 
2 
T 
[ e 
FM 
y 
a 





| Ly 199-1-1366x768 








Dan); 
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在 制作 完成 或 需要 终止 制作 时 ， 需 要 及 时 进行 保存 ， 避 免 由 于 外 界 原 因 造 成 数据 丢失 的 
情况 ， 接 下 来 为 用 户 介绍 天 于 文件 保存 的 相关 知识 。 


如 果 保 存 正 在 编辑 的 文件 ， 可 执行 “文件 > 存储 ”命令 ， 如 图 2-18 所 示 。 或 者 按 快 捷 
E Ctrl +S， 图 像 会 按照 原 有 的 格式 存储 ， 如 果 是 新 建 的 文件 ， 则 会 自动 弹出 “另存 为 ”对 
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话 框 ， 如 图 2-19 所 示 。 


A E 2 amaia 或 修改 其 AMAULE, TAIT “XH > 
俏 为 ”对 语 框 。 


66 


存储 为 ”命令 ， 如 图 2-20 Fi, E 








修改 日 期 


2015/12/8 9:24 
2015/12/16 12:21 















































新 建 [N).… Ctrl+N ' E dRes a 1 新 建 (N)… Ctrl+N 
O... co > a l 
A 1 A or muona saai 条 为- Alt+Shift+Ctrl+O 
HFA.. Alt+Shift+Ctrl+0 o C 5 打开 为 智能 对 人 

打开 为 智能 对 条 BE) [Photoshop (5PSD:sPDD) - EFD) > 
最 近 打 开 文件 (T ng ERA ERBEK o A 
关闭 (C) Ctrl+W re a Er Sae e 
关闭 全 部 Alt+Ctrl+W ee Wr IDH Bridge.. Shift+Ctrl+W 
关闭 并 转 到 Bridge.. Shift+Ctrl+WW 存储 (S) Ctrl+S 








» Shift+Ctrl+5 
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LEA 制作 精美 的 网 责 图 标 


本 实例 制作 的 是 一 款 网 页 小 图 标 ， 整 个 图 标 以 白色 作为 主 色调 ， 畏 色 用 到 了 深蓝 色 和 淡 
BEAM, BRIA 了 阴影 的 效果 为 图 标 增加 了 质感 





新 建 、 打 开 和 保存 文件 、 图 层 样 式 PATA 
20 分 钟 
视频 地 址 视频 \ 第 2 章 \ 制作 精美 的 网 页 图 标 . mp4 
源 文件 地 址 产 文 件 \ 第 2 章 \ 制作 精美 的 网 页 图 标 . psd 











《ci 执行 “文件 > 新 建 ” 


命令 ,新建 一 个 空白 文 


档 ， 如 图 2-21 所 示 。 新 : 
建 “ 图 层 1” 图 层 ， 单 击 | 
工具 箱 中 的 “渐变 工具 ”| 
按钮 ， 设 置 如 图 222 所 : 
示 的 参数 ， 在 画布 中 填充 | 


(EIA, 


CETRA HPH : 
圆 工具 ”按钮 ， 在 画布 中 
绘制 任意 颜色 的 圆 形 , 如 : 
图 2-23 所 示 。 选 中 “椭圆 : 
1” 图 层 ， 单 击 “ 图 层 ” 面 
板 底部 的 “添加 图 层 样式 ” 
按钮 ， 在 弹出 的 “图 层 样 
式 ”对 话 框 中 选择 “内 阴 : 


O DEAR 
i pas 
I 
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影 ”选项 ,设置 如 图 24 | 


所 示 的 人 参数。 

U 提示 
按 住 Shift 键 的 同时 ， 
动 据 标 可 以 绘制 正 圆 形 ，。 








(dass mea 
加 ”选项 ， 设 置 如 图 2.25 : 
所 示 的 参数 。 最 后 选择 : 
6 LE? 选 项 ， 设置 如 


图 2-26 所 示 的 参数 。 
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E: 光 Photoshop 基 本 操作 
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拖 动 鼠标 可 以 绘制 正 圆 形 。 按 住 Shift + Alt 快捷 键 的 同时 ， 拖 


HEM 
ERE 
外 点 光 
paa 
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BERTH U) 
设置 为 默认 值 Fu 
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04 E Fl * äi | PRA BHO THORD? pi BOTH? 

43 受 制 顶 加 1 El : ES ”| 不 透明 度 : 100% ~ 正常 “| 不 透明 度 : 48% > 

E 得 FI “ 188 1 E yl” | We: 图 + a RA: 100% 、 ie: 图 sf 中 PA 填充 : 100% |、 
. È S ! 


图 层 ， 图 层面 板 如 图 2-27 | FuN 
所 示 。 清 除 该 图 层 的 图 层 : És 
样式 ， 并 设置 图 层 “ 不 透 : 
明度 ”为 48% ， 将 “ 李 
同 1 找 贝 ”图 层 移动 到 
WA” RETH, 图 
层面 板 如 图 2-28 所 示 。 
CJt mwai (E | 

n” RE, AT “RS. 
> 模糊 > 高 斯 模糊 ” 命 
$, 设置 如 图 2-29 所 示 : 
的 参数 。 选 中 该 图 层 在 画 : 
布 中 向 下 拖 动 ， 图 像 效果 | 
如 图 2-30 所 示 。 











2-30 
(06 有 执行 “文件 > 打开 ”| 

命令 ,打开 素材 图 像 “ 素 
材 > 第 2 Æ > 23301. png” 
并 拖 入 到 画布 合适 位 置 ， 
图 像 效 果 如 图 2-31 所 示 。 
单 击 “ 图 层 ”面板 底部 的 
“添加 图 层 样 式 ” 按 钮 ， 在 
弹出 的 “图 层 样式 ”对 话 : 

框 中 选择 “内 阴影 ”选项 ， 
设置 如 图 2.32 所 示 的 参数 。 
人 [07 使 用 相同 方法 完成 
相似 椭圆 的 绘制 并 为 其 添 : 
加 图 层 样式 ， 如 图 233: 
所 示 。 复制“ 形状 ”得 | 
到 “椭圆 3 拷贝 ”图 层 ， ; 
单 击 “ 图 层 ” 面 板 底 部 : 
的 “添加 图 层 样式 ” 按 
钮 ， 在 弹出 的 “图 层 样 
式 ” 对 话 框 中 选择 “内 is 
阴影 ”选项 设置 如 : 

图 2-34 所 示 的 参数 。 


© 3 0 














E: 光 Photoshop 基 本 操作 





选项 ， 设 置 如 图 2-35 P E 
示 的 参数 。 设 置 完成 后 ， 
图 像 效果 如 图 2-35 所 示 。 











O : 236 
似 内 容 的 制作 ， 图 像 效果 | 

如 图 2-37 所 示 。 隐 藏 相 关 : an 

图 层 ， 执 行 “图 像 > RY” i O RA) 

命令 ， 裁 切 透明 像素 。 然 ， Pe 


后 执行 “文件 > 导出 > 存 
A Web 所 用 格式 ” 命 
今 ， 在 弹出 的 对 话 框 中 对 
图 像 进行 优化 ， 将 图 像 存 : 
储 为 透 底 ， 如 图 2-38 AñO ` 
Y 提示 
本 条例 中 存储 为 Web 所 用 格式 是 为 了 对 图 像 进行 优化 ， 以 便于 以 最 好 的 质量 和 最 小 














的 体积 上 传 至 网 页 中 。 建 议 在 存储 时 保存 PSD 格式 ， 以 方便 日 后 进行 修改 。 


在 Photoshop CC 中 可 以 通过 执行 “导入 ”和 “ 置 入 ”命令 ,将 外 部 文件 合并 在 一 起 。 执 行 
“ 置 入 移入 对 象 ”命令 可 以 将 照片 、 图 像 或 者 EPS、AI、PDF 等 矢量 格式 的 文件 作为 智能 对 象 置 入 
Photoshop 文档 中 。 执 行 “ 导 入 ”命令 可 以 将 视频 帧 、 注 释 和 WA 支持 等 内 容 导 入 打开 的 文件 中 。 

执行 “文件 > 置 入 观 入 对 象 ”命令 ， 即 弹出 “ 置 入 观 入 对 象 ” 对 话 框 ， 选 中 一 个 文件 ， 
单 击 “ 置 入 ”按钮 ， 将 其 置 入 Photoshop 中 ， 如 图 2-39 所 示 。 按 Enter 键 确认 ， 置 入 的 文件 
作为 智能 对 象 导 入 ， 如 图 2-40 所 示 。 
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执行 “文件 > 导入 ”菜单 中 的 命令 选项 ， 即 可 完成 导入 操作 。 在 Photoshop CC 中 可 以 
导入 “变量 数据 组 ” AMM” “注释 ”和 “WIA 支持 ”4 种 文件 类 型 。 
U 提示 
执行 “导入 ”命令 可 以 简单 理解 为 用 于 外 部 设备 ， 如 扫描 仪 、 数 码 相 机 等 。 执 行 





“ 置 入 ”命令 是 针对 于 其 他 软件 的 文件 或 图 片 格式 。 





由 于 图 片 的 应 用 各 有 不 同 ， 所 以 单单 需要 调整 图 像 的 尺寸 ， 以 应 用 于 不 同 的 需要 。 修 改 
图 像 大 小 时 ， 要 注意 像素 大 小 、 文 档 大 小 以 及 分 辨 率 的 设置 。 

执行 “图 像 > 图 像 大 小 ”命令 ， 或 者 按 快 捷 键 Ctrl + Alt +I， 弹 出“ 图像 大 小 ”对 话 
框 ， 如 图 2-41 所 示 。 


EA ds 1.54M 
尺寸 : ~. 900% 
宽度 [D): 900 
高 度 (G): 600 


HWER): 72 


重新 采样 {5): Éz 
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@ 图 像 大 小 : 可 以 通过 图 像 预 览 窗口 观察 修改 后 的 图 像 效 果 。 

ORT: 可 以 更改 像素 尺寸 的 度量 单位 ， 单 击 “ 尺 寸 ” 附 近 的 三 角形 ， 并 从 菜单 中 选 
取 度 量 单 位 。 

O 调整 为 : 可 以 选取 预 设 以 调整 图 像 大 小 ， 也 可 以 选取 “自动 分 辨 率 ” 以 为 特定 打印 
输出 调整 图 像 六 小 。 

0 TEAR: 可 以 输入 “宽度 ”和 “高 度 ” 的 值 。 要 以 其 他 度量 单位 输入 值 ， 可 以 
从 “宽度 ”和 和 “高度” 文本 框 劳 边 的 菜单 中 选取 度量 单位 。 

@ DFK: 可 以 更改 “分 辩 紊 ”的 值 ， 也 可 以 选取 其 他 度量 单位 。 

O 重新 采样 : 根据 文档 类 型 以 及 是 放大 还 是 绢 小 文档 来 选取 重新 取 祥 方法 。 子 菜单 中 
包括 多 种 选项 ， 上 默认 为 自动 。 


U 提示 
Photoshop CC 的 “图 像 大 小 ”对 话 框 中 新 增 了 一 种 采样 方法 :“ 保 留 





(扩大 )”， 
印刷 。 


细节 
使 用 这 种 方法 放大 图 像 可 以 得 到 比 之 前 版 本 更 多 的 细节 ， 使 放大 的 图 像 更 适合 





E: 光 Photoshop 基 本 操作 


23.6 修改 画布 夏 
在 网 页 UI 制作 过 程 中 ， 时 弟 会 出 现 男 布 尺 寸 不 对 的 问 
题 ， 在 Photoshop F, EI “RR” ATN “AHA 
命令 即 可 修改 画布 的 大 小 。 当 增加 画布 大 小 时 ， 可 在 图 像 
周围 添加 空白 区 域 ， 当 减少 画布 大 小 时 ， 则 裁剪 图 便 。 
执行 “图 像 > 男 布 大 小 ”命令 ， 打开 “ 男 布 大 小 ”对 
话 框 ， 如 图 2-42 所 示 。 
@ 当前 大 小 ， 用 来 显示 当前 图 像 和 文档 的 大 小 。 
O HEND: 在 此 输入 数值 可 以 修改 画布 大 小 。 
@ HN: 匀 选 该 复 选 框 后 ， 输 入 的 数值 代表 国 布 缩放 
区 域 的 大 小 。 输 入 正 值 画布 增 大 ， 输 入 负 值 男 布 图 2-42 
减 小 。 
@ 定位 : 用 来 设置 图 像 在 男 布 中 的 扩展 方向 。 
© 田 布 扩展 颜色 : 用 来 设置 新 国 布 的 填充 颜色 。 当 图 像 的 育 景 颜色 为 透明 颜色 时 ， 该 
先 项 不 可 用 。 


人 以 实例 调整 网 页 尺寸 


本 实例 主要 使 用 户 对 图 像 和 男 布 尺寸 的 大 小 调整 有 进一步 了 解 ， 本 实例 难度 不 大 ， 硕 望 
在 日 后 的 网 页 设计 过 程 中 多 学 、 多 看 和 多 练 ， 以 加 深 印 象 。 








St. Michael 
Apothete 








使 用 到 的 技术 调整 图 片 和 男 布 大 小 、 横 排 文 字 工 具 
2 EN [8 15 分 钟 

视频 \ 第 2 章 \ 调整 网 页 尺寸 . mp4 

源 文件 地 址 源 文件 \ 第 2 章 \ 调整 网 页 尺寸 . psd 
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(61D 执 行 “ 文 件 > 打 开 ” | Tm 


Mpothefe 


命令 ,打开 素材 图 像 “ 素 ; 
材 > 第 2 章 >23601. jpg” 
图 像 效 果 如 图 2-43 所 示 。: 
执行 “图 像 > BAN | 
命令 ,设置 相应 参数 更 改 : 
画布 大 小 ， 如 图 2- 44 | 
所 示 。 | 





(0) 设置 完成 后 单 击 : 
“确定 ”按钮 。 执 行 “图 
像 > 画布 大 小 ”命令 ,对 : 
画布 进行 调整 ， 如 图 2-45 | 


相对 (R) 


所 示 。 完 成 后 单 击 “ 确 | a 
定 ”按钮 ， 图 像 效 果 如 Sab 


E] 2-46 FIF., i | 画布 扩展 颜色 : HE. 


图 2-46 
Cdi «54 ma, 
设置 如 图 2-47 ARAS | 
数 ， 单 击 工具 箱 中 的 “ 横 : 
排 文字 工具 ”， 在 画布 中 | 
输入 如 图 2- 48 所 示 的 
文字 。 





St. Michael Apotheke Telefon: 0212/815021 
Grúnewalder Str. 55 Telefax: 0212/8150 09 
42657 Solingen infodbst-michael-apo-solingen.de 
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EJÓMES Photoshop 基 本 操作 





> T dell del > A 出 和， \ ee 
终 图 像 效 果 如 图 2- 49 | pothefe 
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BRIE h hodi 





KINRARA BAAR E, TUS RM DEN ASA. ER 
E O A me 


在 实际 操作 中 ， 为 了 保护 源 文件 或 者 方便 比较 图 像 的 变化 ， 经 常 在 一 些 操作 中 复制 一 
图 像 。 在 Photoshop 中 可 以 轻松 实现 图 像 复 制 的 操作 。 

执行 “图 像 > 复制” 命令， 弹出 “复制 图 像 ” 对 话 框 ， 如 图 2-50 所 示 。 单 击 “ 确 定 ” 
按钮 即 可 复制 图 像 ， 如 图 2-51 所 示 。 
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We 提示 
义 选 “ 仅 复 制 合并 的 图 层 ” 选 项 ， 复 制 操 作 将 只 复制 合并 图 层 上 的 内 容 ， 未 合并 图 


层 上 的 内 容 不 会 被 复制 。 复 制 的 YA ARAN? PL 
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[DIA ”制作 精美 的 网 页 界面 


本 实例 主要 帮助 用 户 了 解 复 制 在 网 页 设计 中 的 应 用 ， 这 款 网 页 界面 以 大 量 的 色 块 作为 主 
休 ， 制 作出 类 似 于 标签 的 效果 ， 使 浏览 者 可 以 更 快 、 更 精确 地 找到 需要 了 解 的 内 容 。 








YOUR LOGO 





复制 图 像 、 珑 形 工 具 、 横 排 文字 工具 


视频 \ 第 2 章 \ 制作 精美 网 页 界面 . mp4 
源 文件 \ 第 2 章 \ 制作 精美 网 页 界面 psd 





Q01 有 执行 “文件 > 打开 ”: 
命令 ,打开 素材 图 像 “ 素 : 
材 > 第 2 章 >24101. png” | 
图 像 效 果 如 图 2-52 所 示 。 | 
单 击 工具 箱 中 的 “矩形 工 | 
具 ” 设 置 RGB (13, 189, ¡ 
116) 在 画布 中 绘制 如 
图 2-53 所 示 的 和 矩 形 。 
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032 执行“ 图像 > 复制” 
命令 , EH GER E 
E, BA “GER 1H 
图 层 ， 图 层面 板 如 图 2-54 | 
所 示 ， 图 像 效 果 如 图 2-55 | 
所 示 。 


专 过 下 风量 优秀 的 设计 方案 
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E: 光 Photoshop 基 本 操作 








《co3] 修 改 珑 形 填 充 颜 色 
A RGB ( 240、240、i 
240) ， 图 像 效 果 如 图 2-56 : 
所 示 。 使 用 相同 方法 完成 
其 他 内 容 的 制作 ， 图 像 效 : 
果 如 图 2-57 所 示 。 | 
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(04 执行 “文件 > 打开 ” / 
命令 ， 打开 素材 图 像素 


材 > 第 2 章 >24102. png” : 
图 像 效 果 如 图 2-58 所 示 。; ES 


使 用 “ 横 排 文字 工具 ”， as 
设置 如 图 2-59 所 示 的 参 : pS == 
数 ， 在 画布 中 输入 文字 。 
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(005 有 使 用 相同 方法 完成 / 
其 他 文字 的 输入 ， 图 像 效 
果 如 图 2-60 所 示 。 使 用 





相同 方法 完成 其 他 内 容 的 WE8 用 户 界面 
制作 ， 图 像 效果 如 图 2-61 | 3 
所 示 。 
2-00 2-01 
U 提示 





使 用 “ 横 排 文 字 工具 ”时 ， 在 画布 中 单 击 鼠 标 左 键 即 可 输入 文字 ， 如 果 需 要 为 文字 


框 选 范围 ， 可 以 在 按 住 左 键 的 同时 拖 擂 鼠标 ， 为 文字 创建 选 框 。 


图 像 的 捞 贝 、 粕 贴 也 是 一 些 创 作 中 经 前 会 遇 到 的 一 项 操作 ， 执 行 图 像 的 捞 贝 和 粘贴 可 以 
将 原 图 像 中 选区 内 的 图 像 复制 到 创作 的 图 像 中 ， 而 且 不 会 损 闵 原始 素材 。 
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本 实例 主要 帮助 用 户 加 深 坝 固 捞 贝 和 痢 巾 图片 ， 这 款 界面 以 蓝 色 为 主 色调 ， 辅 色 运 用 了 





红色 ， 整 体 采 用 了 笔 刷 的 效果 ， 界 面 整体 给 人 以 轻快 明朗 的 感觉 。 
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使 用 到 的 技术 
学 习 时 间 
视频 地 址 


(0 人 执行 “文件 > 打开 ” 


命令 ,打开 素材 图 像 “ 素 : 
材 > 第 2 章 >24201. png” 
图 像 效果 如 图 2-62 所 示 。 | 
单 击 工具 箱 中 的 “矩形 工 
具 ” 按 钮 ， 在 画布 中 绘制 
任意 颜色 的 和 矩形 如 


2-63 PT, 


《co23 执 行 “ 文 件 > 打开 ”: 
命令 ,打开 素材 图 像 “ 素 : 
材 > 第 2 章 >24202. png”, | 
使 用 “和 矩形 选 框 工具 ”- 
在 画布 中 创建 选区 , 如 : 
图 2-64 所 示 。 执 行 “ 编 ; 
HEDGE | 


AAS 


辑 > 找 由 ”命令 ， 
区 ， 如 图 2-65 所 示 。 
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AA E==) eiirmsrovad  meauizovanė ROMTAKT 
QUBCHIODNKOMURA 


(00 引 切换 至 “素材 24201” 
E, 执行 “编辑 > 粘贴 ” 
命令 ， 粘贴 选区 ， 如 
图 2-66 所 示 。 
Ctrl + T 对 图 片 进行 适当 
缩小 并 适当 调整 位 置 ， 
像 效果 如 图 2-67 所 示 。 


` 
a fy 

















Wiheeden kvelicému ¿spácha Francovisto-desta obchodnikonoa připrivue Mo Sped 
Busicess Mesinay 





riot 2411 FRANCONZKO CEKA OBCHODN KOMORA | Váecina eva vracen. De Fran 
Mt 一 位 





UCSFE 


2-00 2-67 


Ctt “RHE” B 
E, A RETE 4 
版 ， 图 像 效 果 如 图 2- 68 
所 示 。 使 用 相同 方法 完成 
其 他 内 容 的 制作 ， 如 图 2- 
69 所 示 。 





FS REALIZOvANE ORHAN: 





Francouzsko-česká obchodní komora se stala organizátorem prvniho Speed Business 
Meetinqu v České republice. 


Tento koncept, vycházející z principu Speed Datingu, umožňuje účastníkům během velmi 
krátké doby prezentovat své výrobky nebo služby, rozšířit síť svých kontaktů a navázat nové 
obchodni vztahy. 





JAK SBM PROBÍHÁ ? 


Účastník si na začátku vylosuje svého prvniho partnera. Každý z dvojice diskutujicich má pak 
3 minuty na to, aby svému protějšku prezentoval svou společnost včetně produktů a služeb. 
Béhem zbývajících 4 minut pak oba mohou probrat možnosti vzájemné spolupráce. 


Po 10 minutách zazní signál, jedna řada účastníků zůstane sedět u svých stolů, protější 
řada se přesune k dalšímu stolu v pořadí. KaZdy účastník tak má během akce możnost 


absolvovat 8 desetiminutových schůzek typu one-to-one 


Vzhledem k velikému úspěchu Francouzs ko-česká obchodní komora připravuje tyto Speed 
Business Meetingy. 
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U 提示 
剪贴 蒙 版 也 叫 剪 贴 组 ， 令 是 使 用 下 方 图 层 的 形状 来 限制 上 方 图 层 的 显示 状态 ， 





义 达 到 一 种 类 似 于 剪贴 画 的 刘 


Photoshop 文件 中 通常 会 包含 许多 的 图 层 ， 可 以 通过 “选择 性 粘贴 ”命令 将 找 贝 对 象 粕 


9 o————— 
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贴 到 不 同 的 图 层 中 。 通 过 执行 “编辑 > 选择 性 粘贴 ”命令 ， 可 以 看 到 子 菜单 中 有 不 同 的 粘 
贴 命令 。 
O FAAA: 如 果 剪 贴 板 包含 从 其 他 Photoshop 文档 找 贝 的 像素 ， 可 以 将 选区 粘贴 到 目 
标 文 档 中 ， 与 其 在 产 文 档 中 所 处 位 置 相 同 的 相对 位 置 中 。 
O 贴 入 /外 部 粘贴 : 将 找 贝 的 选区 粘贴 到 任意 图 像 中 的 其 他 选区 之 中 或 之 外 。 将 产 选 区 
粘贴 到 新 图 层 ， 而 目标 选区 边框 将 转换 为 图 层 蒙 版 。 


QA 制作 网 页 展板 


本 实例 主要 帮助 用 户 了 解 选择 性 灯 贴 在 网 页 设计 中 的 应 用 ， 这 款 界 和 面 以 红色 为 主 色 ， 辅 
色 用 到 了 白色 和 和 绿色， 整体 简约 却 不 简单 ， 展 板 及 用 了 多 KAKES J 效果 ， 使 浏览 者 的 
MERMERE, 


fresh fruit 
everyday! 


Cha AHF” : "N EN 
命令 ， 打开 素材 图 像 “ 素 | A- | 
材 > 第 2 章 >24302. png” ` 
图 像 效 果 如 图 2-70 PO ` 
单 击 工具 箱 中 的 “椭圆 选 : AN 
框 工具 ”按钮 ， 在 画布 中 : A 
绘制 圆 形 选区 ， 如 图 2-71 | 图 2-70 El 2-71 

所 示 。 


UV 提示 
ee 











布 中 绘制 正 圆 形 选 





《3 执行 “编辑 > 拷贝 ”: 
命令 ， 捞 贝 选 区 ， 如 图 2.72 : 
所 示 。 执行 “文件 > 打开 ”| 
DS, 打开 素材 图 像 “ 素 : 
材 > 第 2 章 >24301. png” 


图 像 效 果 如 图 2-73 所 示 。 


《3 单 击 工具 箱 中 的 
“ 顶 圆 选 框 工具 ”按钮 ， 
在 画布 中 绘制 圆 形 选区 ， 
如 图 2-74 所 示 。 执行 
“编辑 > 选择 性 粘贴 > 贴 : 
粘贴 选区 , 如 : 


入 ”命令 ， 


2-75 FIAR, 


(dit tn 
位 置 ， 图 像 效 果 如 图 2-76 | 
所 示 。 此 时 观察 “图 层 ” 
面板 ， 可 以 看 到 图 层 自动 : 
创建 的 蒙 版 ， 如 图 2-77 : 
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nec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. 

Nulla consequat massa quis enim. Donec pede justo, fringilla vel, 

aliquet nec, valputate aget, arcu. In enim justo, rhcnzus ut, imperdiet 

a, venenatis vitac, justo, Nullam dictum felis cu pede mollis pretium. 
[read more.) 
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在 处 理 图 像 时 ， 有 时 会 出 现 构图 不 合理 ， 或 者 只 是 需要 图 像 中 的 某 一 部 分 ， 使 用 “ 裁 


剪 工 具 ” 可 以 解决 这 些 问题 。 





在 处 理 图 像 时 ， 如 果 需 要 将 一 张 图 像 裁 筋 成 固定 大 小 ， 可 以 通过 以 下 操作 完成 。 首 先 打 
AREA, ME ATA”, ERAS “REKEL” ENANA 
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图 像 的 宽 高 ， 如 图 2-78 所 示 。 然 后 在 图 像 上 拖 动 选择 需要 的 区 域 ， 单 击 “ 提 交 ” 按 钮 即 可 ， 
效果 如 图 2-79 所 示 。 








2-78 2-79 


有 些 图 片 元 素 可 能 在 构图 方面 存在 先天 不 足 ， 可 以 通过 裁剪 将 其 完善 。 选 择 “裁剪 工 
具 ”， 在 选项 栏 的 “设置 裁剪 工具 的 亚 加 选项 ”下 拉 列 表 中 选择 裁剪 辅助 线 ， 利 用 这 些 辅助 
线 可 以 裁剪 获得 好 的 构图 。 

@ 三 等 分 ， 三 分 法 构图 的 主要 目的 就 是 避免 对 称 式 构图 。 图 上 任意 两 条 线 的 交点 就 是 

放置 主题 的 合适 位 置 。 

@ 网 格 : 裁剪 网 格 用 来 帮助 我 们 对 齐 图 片 。 选 择 了 小 方 格 的 对 齐 方式 后 ， 随 便 旋 转 、 

摇 电 任意 一 个 角 来 手动 对 齐 图 片 ， 裁 剪 网 格 主要 是 用 来 对 齐 地 平 线 倾斜 的 照片 。 

@ 三 角形 : 以 三 个 点 为 景物 的 主要 位 置 ， 形 成 一 个 三 角形 ， 其 构图 方式 的 特点 是 安定 、 

均衡 又 不 失灵 活 。 这 种 三 角形 有 正三 角 、 斜 三 角 和 倒 三 角 。 

@ 黄金 比例 ; 黄金 分 割 法 是 最 常用 的 摄影 构图 法 则 。 使 用 黄金 分 割 法 裁剪 图 像 时 ， 一 

定 要 注意 画面 的 主题 元 素 应 该 放置 在 两 条 线 交 点 的 最 近 位 置 。 

@ 对 角 : 利用 裁 切 框 对 图 像 进 行 对 角 线 构图 。 也 属于 黄金 分 割 法 的 一 种 构图 方法 ， 两 
条 斜 线 的 交点 是 放置 主题 的 最 佳 位 置 。 
金色 螺 线 : 观 者 的 视线 被 安排 在 螺旋 线 周围 的 对 象 引导 到 螺旋 线 中 心 ， 黄 金 螺旋 线 
绕 得 最 密集 的 一 端 为 图 片 的 主体 ， 也 是 黄金 螺旋 的 起 点 。 

25.3 BARI 

FE Photoshop 中 也 可 以 对 图 像 的 透视 效果 进行 微调 ， 使 用 “透视 裁剪 工具 ”裁剪 图 像 ， 
可 以 旋转 或 者 扭曲 裁剪 定 界 框 。 裁 前 后 ， 可 对 图 像 应 用 透视 变 

打开 一 张 图 片 ， 选 择 “透视 裁剪 工具 "” ， 在 照片 上 绘制 裁 前 区域， 如 图 2-80 所 示 。 拖 动 
调整 裁剪 框 的 透视 角度 与 被 裁剪 的 透视 角度 一 致 后 ， 单 击 “ 提 交 ” 按 钮 或 在 裁剪 框 中 双击 
鼠标 左 键 ， 即 可 完成 透视 裁剪 操作 ， 如 图 2-81 所 示 。 








—o Y o 





E: 光 Photoshop 基 本 操作 








2-81 


BRIER 





除了 可 以 对 图 像 进行 裁剪 操作 外 ， 还 可 以 通过 “变换 ”和 “变形 ”命令 对 图 像 进行 旋 
转 、 缩 放 、 变 形 和 扭曲 等 各 种 操作 。 


复制 图 像 的 位 置 如 果 疫 有 达到 预期 的 目的 ， 可 以 使 用 工具 箱 中 的 “移动 工具 ”将 图 像 
移动 到 合适 的 位 置 。“ 移 动工 具 ” 可 以 轻松 地 实现 对 图 像 图 层 或 者 选区 中 的 对 象 进行 移动 的 


O 移动 图 层 内 的 图 像 : 当 图 像 中 包 仿 多 个 图 层 时 ， 我 们 一 定 要 先 选 中 需要 移动 的 图 层 ， 
然后 使 用 “移动 工具 ”， 就 可 以 对 图 层 内 的 图 像 进行 移动 操作 。 

O 移动 选区 内 的 图 像 : 很 多 时 候 可 能 只 需要 一 个 图 像 内 的 一 部 分 图 案 ， 这 时 候 就 要 先 
使 用 选区 工具 框 选 需要 移动 的 部 分 ， 然 后 使 用 “移动 工具 ” 拖 动 选中 部 分 进行 移动 ， 
如 图 2-82 所 示 。 





2-82 


当 经 过 复制 的 图 像 大 小 出 现 问题 时 ， 就 需要 调整 其 大 小 。 移 选 下 需要 缩放 的 对 象 ， 执 行 


o /5 eo 


本 网 站 UI 设计 第 2 版 9 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 


“编辑 > 变换 > 缩放 ”命令 ， 拖 动 变换 框 的 四 个 拐角 便 可 对 其 进行 缩放 。 
O 等 比例 缩放 : 拖 动 变换 框 的 四 个 拐角 的 同时 按 下 Shift 键 ， 或 者 单 击 选项 栏 中 的 “ 保 
持 长 宽 比 ”按钮 ， 即 可 对 图 像 进行 等 比例 缩放 。 
@ 从 中 心 等 比例 缩放 : 拖 动 变换 框 的 四 个 拐角 的 同时 按 下 Shift 和 At 键 ， 可 保持 图 像 
的 中 心 点 不 变 ， 图 像 等 比例 进行 缩放 ， 如 图 2-83 所 示 。 





图 2-83 
旋转 图 像 主要 用 来 调整 图 像 倾 斜 的 角度 。 执 行 “ 编 辑 > 变换 > 旋转 ”命令 ， 然 后 把 鼠 


标 放 在 变换 框 鸭 四 个 扔 角 处 ， 当 鼠标 的 形状 变 成 一 个 等 箭头 时 ， 便 可 以 拖 动 鼠标 变换 图 像 的 
倾斜 角度 ， 也 可 以 直接 在 选项 栏 的 “旋转 角度 ”文本 框 中 输入 数值 ， 如 图 2-84 所 示 。 
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“变形 ”命令 允许 用 户 拖 动 控制 点 ， 以 变换 图 像 的 形状 、 路 径 等 ， 也 可 以 使 用 选项 栏 中 
“变形 样式 ” 弹出 菜单 中 的 形状 进行 变形 。“ 变 形 样式 ”弹出 菜单 中 的 形状 也 是 可 延展 的 ， 
可 拖 动 它们 的 控制 点 。 执 行 “ 编 辑 > 变换 > 透视 ”命令 ， 可 以 对 图 像 实 现 透 视 效 果 ， 如 
图 2-85 所 示 。 执 行 “ 编 辑 > 变换 > 变形 ”命令 ， 可 以 对 图 像 实现 变形 效果 ， 如 图 2- 86 
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所 示 。 





2-85 2-80 
执行 “编辑 > 自由 变换 路 径 ” mz Ctrl +T， 在 变 ne ed ia 


可 在 弹出 的 下 拉 菜 单 中 选择 更 多 的 变换 ， 选 项 变换 完成 后 ， 双 击 鼠 标 或 是 按 下 Enter 键 ， 
出 自由 变 


QA 为 网 页 制作 广告 播 加 


本 实例 主要 为 用 户 详细 讲解 自由 变换 在 网 页 设计 中 的 应 用 ， 此 款 界 面 以 红色 作为 主 色 
调 ， 描 配 黄色 作为 辅 色 ， 整 体 界 面 以 喜庆 祥和 为 主题 ， 使 浏览 者 感受 到 浓 深 的 市 日 氟 围 。 








ra hy 




















使 用 到 的 技术 自由 变换 、 和 矩形 工具 
+23 18 5 分 钟 
视频 地 址 视频 \ 第 2 章 \ 为 网 页 制作 广告 插图 . mp4 
源 文 件 地 址 源 文 件 \ 第 2 章 \ 为 网 页 制作 广告 插图 . psd 
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(001 有 执行 “文件 > 打开 ”: 
命令 , 打开 素材 图 像 “ 素 ME 
材 > 第 2 章 >26501. png” | 
图 像 效 果 如 图 2-87 所 示 。: 
单 击 工具 箱 中 的 “和 矩形 工 ; 
具 ” 按 钮 ， 在 画布 中 绘制 : 
任意 颜色 的 正方 形 ， 如 图 | 
2-88 所 示 。 


《023 执 行 “ 编 辑 > 自由 变 : 
换 ” 命 令 ， 拖 动 变换 框 旋 
续 图 像 ， 按 下 Enter 键 确定 | 
变换 ， 如 图 2- 89 所 示 。 单 : 
击 “ 图 层 ”面板 底部 的 
“添加 图 层 样式 ”按钮 , E 
弹出 的 “图 层 样式 ”对 话 ， 
框 中 选择 “内 阴影 ”选项 ，: 图 2-89 图 2.90 
设置 如 图 2-90 所 示 的 参数 。; 





03 有 执行 “文件 > 打开 ”: 
命令 ,打开 素材 图 像 “ 素 : 
材 > 第 2 章 >26502. png” | 
图 像 效果 如 图 2-91 FAO | 
将 素材 拖 动 到 设计 文档 中 ， 
执行 “编辑 > 自由 变换 ” 
命令 ， 将 图 像 缩 放 到 合适 : 

大 小 ， 如 图 292 所 示 。 : 





2-91 mpe 
(Mido 
层 缩 览 图 ， 在 弹出 的 快捷 ， 








菜单 中 选择 “创建 剪贴 莹 i ET 
版 ”命令 ， 如 图 2-93 FF | sal 

— A | 选择 链接 图 层 

Z 人 Z £ ， 

Ss 像 效 果 如 图 2-94 

所 示 。 粘贴 图 层 样式 

清除 图 层 样式 

复制 形 快 尾 性 

OF 

2-93 2-94 
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VU 提示 
创建 剪贴 蒙 版 主要 是 为 了 保护 源 图 像 ， 并 使 图 像 的 显示 区 域 符合 下 方 图 层 的 大 小 和 
形状 ， 并 不 会 改变 图 像 的 原 比 例 ， 用 户 可 以 决定 图 像 的 显示 区 域 。 





MIRS MEA RE 





lenta 寺 程 中 ， 如 果 在 制作 过 程 中 出 现 了 操作 失误 或 对 制作 的 效果 不 满意 ， 可 以 
RE RR. 
ms 
执行 “编辑 > 还原” 命令 ， 
将 图 像 还 原 到 上 一 步 状态 中 。 
当 执 行 一 Era 命令 后 ，“ 还 原 ” 命 令 就 会 变 成 “ 重 做 ” 命令。 再 执行 “ 重 做 ?” 
TF, WS 次 复 到 执行 “还 原 ” 命 令 前 的 状态 。 











E 





小 















































J 最 后 一 次 编辑 ， 








执行 “还 原 ” 命 令 5 deca Ma E, BÉ no n 可 以 连续 执行 “ 编 
辑 > 后 退 一 步 ” 命 令 ， 或 连续 按 
如 果 要 取消 还 原 ， 可 以 连续 执行 ee 命令 ， pare Shift + Ctrl + 
Z， 逐 步 
































/ H 











KERAHE. 





Photoshop 具有 自动 保存 功能 。 执 行 “ 编 辑 > 首选 项 > 文件 处 理 ” 命 令 ， 勾 选 “ 自 动 存 
储 恢 复 信息 时 间 间 隔 ” 选 项 ， 并 设置 存储 时 间 ， 如 图 2-95 所 示 。 设 置 完成 后 ，Photoshop 会 
按照 设 定 的 时 间 自 动 保存 文件 为 a ae MM, FAGOR E AT 
文件 编辑 时 ， 再 次 启动 ¡Ad Photoshop ZH 7 —A 8 动 保存 的 文件。 











像 预 览 ; 总 是 存储 


XH RE: ALS 
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专家 文 拍 


本 章 主要 讲解 了 Photoshop CC 的 基本 操作 方法 ， 虽 然 这 些 操作 很 简单 ， 但 这 些 都 是 图 像 
处 理 的 基础 内 容 ， 只 有 丈 练 掌握 这 些 ， 才 能 深入 地 学 习 Photoshop CC 的 其 他 功能 。 


矢量 图 像 ， 也 称 为 面向 对 象 的 绘图 图 像 。 像 Adobe Illustrator. CorelDraw. AutoCAD 等 软 
件 都 是 以 矢量 图 像 为 基础 进行 创作 的 。 矢 量 文件 中 的 图 形 元 素 为 对 象 。 每 个 对 象 都 是 一 个 实 
E, CRAE., HA, HB, indir RESORT EA 











积 较 小 ， 可 以 任意 放大 、 缩 小 ， 影响 图 像 质 量 ， 如 图 2-96 所 示 。 
4] 2-96 
位 图 图 像 是 由 许多 点 组 成 ， 这 些 操 被 称 为 像素 。 当 许多 不 同 颜色 的 像素 组 合 在 一 起 后 


便 构成 了 一 幅 完 整 的 图 像 。 位 图 图 像 浆 补 了 矢量 图 像 的 缺陷 ， 它 能 够 制 | 作出 颜色 和 色调 变化 
丰富 的 图 像 ， 可 以 通 真 地 表现 自然 界 的 景观 ， 同 时 也 可 以 很 容易 地 在 不 同 软件 之 间 交 换文 
件 。 这 就 是 位 图 图 像 的 优 点 ， 位 图 放大 效果 如 图 2-97 所 示 。 

> > 





分 辩 紊 是 单位 长 度 内 的 扩 或 像素 的 数量 。 分 辩 率 的 高 低 直 接 影 响 位 图 图 像 的 效果 ， 大 低 
会 导致 图 像 粗糙 模糊 ， 在 排版 打印 时 ， 图 片 会 变 得 非 弟 模糊 ; 而 使 用 较 高 的 分 辨 率 ， 则 会 增 


—o 50 e 





E: 光 2 Photoshop 基 本 操作 


加 文件 的 大 小 ， 并 降低 图 像 的 打印 速度 ， 所 以 掌握 好 像素 的 大 小 是 非常 重要 的 。 出 版 印刷 可 
以 选择 分 辨 率 大 于 或 等 于 300 像素 ， 色 彩 模 式 为 CMYK， 文 件 存储 为 TIF 格式 。Web DIR 
可 以 小 于 或 等 于 72 像素 ， 色 彩 模 式 为 RGB, 


总 结 扩展 


经 过 一 个 章 万 的 学 习 ， 相 信用 户 对 Photoshop 的 基本 操作 有 了 一 定 的 了 解 ， 接 下 来 通 
一 个 实际 操作 ， 对 本 章 的 学 习 做 个 检验 。 








ARE EA PALA AER 识 的 讲解 ， 让 读者 轻松 掌握 Photoshop 的 基 
础 操作 。 读 者 也 可 以 充分 利用 这 些 基 础 知识 和 操作 ,继续 扩 展 ， 从 而 创作 出 更 加 优秀 的 
作品 。 








网 页 按钮 


这 是 一 款 扁平 化 处 理 的 网 页 按钮 ， 此 款 按钮 以 蓝 色 作为 主 色调 ， 辅 色 用 到 了 白色 和 黑 
色 。 通 过 使 用 颜色 渐变 ， 制 作出 折 狠 的 效果 。 整 体 界 面 清 新 明快 。 
源 文 件 地 址 : pp 第 2 EN 制作 简单 的 网 页 按钮 . PSD 
视频 地 址 . 第 2 章 \ 制作 简 页 按钮 . MP4 


L EAN, MATAR E. 


3. 使 用 相同 方法 完成 相似 内 容 的 制作 








2. 使 用 “ 圆 角 和 矩形 工具 ”绘制 图 形 ， 并 添加 图 
BRR. 





4. Ida T 输入 文字 ， 使 用 相同 





o “日 ] 一 





Ri UI 配色 





色彩 在 网 页 UI 中 占有 很 大 比重 。 如 果 用 户 想 要 设计 出 好 
的 UI 作品， 那么 合理 运用 色彩 必 不 可 少 。 而 如 何 进 行 色彩 搭 
配 ， 就 需要 对 色彩 的 特性 和 象征 有 所 认 知 和 了 解 。 本 章 将 带 
领 用 户 学 习 UI 配色 ， 为 以 后 用 户 设计 出 出 色 的 UI 作品 而 做 
准备 。 





EE 网 站 页 面 UI 配 公 


GD 色彩 的 基础 刊 识 


网 页 设计 是 一 种 集 配 色 和 和 版 式 设 计 为 一 体 的 设计 形式 ， 需 要 了 人 解 和 掌握 一 些 色彩 和 版式 
方面 的 理论 知识 ， 才 能够 更 科学 、 合 理 地 布局 和 展示 页 面 ， 如 图 3-1 所 示 为 两 款 配 色 精 美的 
WRA, 





(necim NS N 


SIGNATURE WALLPAPER 





INFO. ¡nnalim' Graphic ; PUNOJM DIZAJNE TE NDRYSHME SI P.SH ; WALLPAPER , MARKA, SIGNATURE , ICONS , COVER , PROFILE PHOTO ET). 


2 WALLPAPER - 6 EURO 
MARKA - 4 ERUO 
COVER = 2 ERUO 
SIGNATURE - 1 EUR 





044-173-547 

q, l 上 et > 044-275-246 
前 ¿ES 00 Template Desinged by .nnaiim 044-787-388 
K hd www. sub-creatiwe. com EMAIL - EX- WORKS | HOTMAIL. COM 
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原色 ， 是 指 不 能 透 过 其 他 颜色 的 混合 调配 而 得 出 的 “基本 色 ”。 以 不 同比 例 将 原色 混 
合 ， 可 以 产生 出 其 他 的 新 颜色 。 肉 眼 所 见 的 色彩 空间 通常 由 三 种 基本 色 组 成 ， 称 为 “三 原 
E”, 一 般 来 说 ， 革 加 型 的 三 原色 是 红色 、 绿 色 和 蓝 色 ， 如 图 3-2 所 示 。 


3-2 





我 们 看 到 印刷 的 颜色 ， 实 际 上 都 是 看 到 的 纸张 反射 的 光线 ， 因 此 印刷 的 三 原色 就 是 能 够 
吸收 RGB 的 颜色 ， 为 青色 、 品 红色 、 黄 色 ， 它 们 就 是 RGB 的 补 色 ， 如 图 3-3 所 示 。 


~ 
= 
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VU 提示 
三 原色 可 以 混合 出 多 种 多 样 的 颜色 ， 不 过 不 能 调配 出 黑色 ， 只 能 混合 出 深 灰 色 。 因 
深重 的 颜色 。 





此 在 彩色 印刷 中 ， 除 了 使 用 的 三 原色 外 ， 还 要 增加 一 版 黑色 ， 才 能 得 





色彩 视觉 是 人 对 色彩 的 视觉 反应 ， 既 受到 生理 、 大 脑 视 觉 神 经 的 限制 ， 又 取决 于 色彩 的 
属性 、 特 氮 、 情 感 ， 以 及 不 同 的 色 与 色 、 色 与 光 对 视觉 的 作用 。 


光 与 色 

区 是 以 波动 的 形式 进行 直线 传播 的 ， 具 有 波长 和 振幅 两 个 因素 。 不 同 的 波长 长 短 产生 色 
相 拳 别 。 不 同 的 振幅 强 弱 大 小 产生 同一 色相 的 明暗 差别 。 交 在 传播 时 有 直射 、 反 喘 、 透 射 、 
漫 射 、 折 射 等 多 种 形式 。 光 直射 时 直接 传 入 人 眼 ， 视 觉 感受 到 的 是 光源 色 。 当 光源 照射 物体 
时 ， 光 从 物体 表 甸 反射 出 来 ， 人 眼 感 受到 的 是 物体 表 和 面色 彩 。 当 光照 射 时 ， 如 遇 甫 璃 之 类 的 
透明 物体 ， 人 眼看 到 的 是 透 过 物体 的 穿 透 色 。 光 在 传播 过 程 中 ， 受 到 物体 的 干涉 时 ， 则 产生 
漫 射 ， 对 物体 的 表面 色 有 一 定 影响 。 如 通过 不 同 物体 时 产生 方向 变化 ， 称 为 折射 ， 反 映 至 人 
眼 的 色 交 与 物体 色相 同 ， 如 图 3-4 所 示 。 





自然 界 的 物体 五 花 八 门 、 变 化 万 干 ， 它 们 本 身 虽 然 大 部 不 会 发 光 ， 但 部 具 有 选择 性 地 吸 
收 、 反 射 、 透 射 色光 的 特性 。 当 然 ， 任 何 物体 对 色光 不 可 能 全 部 吸收 或 反射 ， 因 此 ， 实 际 上 
不 存在 绝对 的 黑色 或 白色 。 

但 是 物体 对 色光 的 吸收 与 反射 能 力 昌 是 固定 不 变 的 ， 而 物体 的 表面 色 却 会 随 春光 源 色 的 
不 同 而 改变 ， 有 时 甚至 失去 其 原 有 的 色相 感 项 。 所 谓 的 物体 “固有 色 ”， 实 际 上 不 过 是 前 光 
下 人 们 对 此 的 习惯 而 已 。 如 在 内 煌 、 强 烈 的 各 色 霓 虹 灯 光 下 ， 所 有 建筑 及 人 物 的 肤色 几乎 都 
失去 了 原 有 本 色 ， 而 显得 奇异 莫 测 。 另 外 ， 光 照 的 强度 及 角度 对 物体 色 也 有 影响 ， 如 图 3-5 
所 示 。 


网 站 页 面 UI 配色 





彩色 显示 器 产生 色彩 的 方式 类 似 于 大 自然 中 的 发 光 体 。 在 显示 器 内 部 有 一 个 和 电视 机 一 
se 
产生 发 光 效 应 。 三 种 不 同性 质 的 磷 光 片 分 别 发 出 红 、 绿 、 蓝 三 种 光波 ， 计 算 机 程序 量化 地 控 
We 再 经 过 合成 琶 加 ， 就 模拟 出 自然 界 
中 的 各 种 色光 ， 如 图 3-6 所 示 。 





色彩 三 要 素 是 用 色相 、 饱 和 度 和 明度 来 接 述 的 ， 人 有 眼看 到 的 任 一 彩色 光 都 是 这 三 个 特性 
的 综合 效果 ， 这 三 个 特性 即 是 色彩 的 三 要 北 。 其 中 色相 与 光波 的 波长 有 直接 关系， 亮度 和 饱 
和 度 与 花 波 的 幅度 有 关 。 明 度 高 的 遍 色 有 癌 前 的 感 区 ， 了 明度 低 的 颜色 有 后 退 的 感 帝 。 


色彩 是 由 于 物体 上 的 物理 性 的 光 反 射 到 人 眼 视神经 上 所 产生 的 感 项 。 色 的 不 同 是 由 区 的 
EN 指 的 是 这 些 不 同 波 长 的 色 的 情况 。 疲 长 最 长 的 是 红 
E, AMES E. EA, E E, E A ET, E, RR, Bg, BAMIA 
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12 种 色 作 为 色相 环 。 在 色相 环 上 排列 的 色 是 纯度 高 的 色 ， 被 称 为 纯色 。 这 些 色 在 环 上 的 位 
置 是 根据 视觉 和 感 党 的 相等 间隔 来 进行 安排 的 。 用 类 似 这 样 的 方法 还 可 以 再 分 出 差别 细微 的 
多 种 色 来 。 在 色相 环 上 ， 与 环 中 心 对 称 ， 并 在 180" 的 位 置 两 端的 色 被 称 为 互补 色 ， 如 图 3-7 


所 示 。 
十 二 色相 环 ”二 十 四 色相 环 四十八 色相 环 九 十 六 色相 环 
图 3-7 
U 提示 





色相 环 是 以 黄 、 红 和 蓝 三 色 为 基础 ， 由 此 三 原色 配置 组 合 而 成 。 一 般 色 相 环 有 十 二 


色相 环 、 二 十 四 色相 环 、 四 十 八 色 相 环 和 九 十 六 色相 环 等 。 


饱和 度 是 指 色 彩 的 鲜艳 程度 ， 也 称 色 彩 的 纯度 。 饱 和 上 度 取 决 于 该 色 中 伟 色 成 分 相 消 色 成 
分 的 比例 。 含 色 成 分 越 大 ， 饱 和 上 度 越 大 ; 消 色 成 分 越 大 ， 饱和 度 越 小 。 饮 和 度 可 定义 为 彩 度 
除 以 明度 ， 如 图 3-8 所 示 。 





表示 色 所 具有 的 亮度 和 上 暗 度 被 称 为 明度 。 计 算 明 度 的 基准 是 灰 度 测试 卡 ， 如 图 3239 所 
示 。 黑 色 为 0， 白 色 为 10， 在 0 ~10 等 间隔 的 排列 为 9 个 阶段 。 色 彩 可 以 分 为 有 彩色 和 无 彩 
E, E a 作为 有 彩色 ， 每 种 色 各 自 的 亮度 、 瞳 度 在 灰 度 测试 卡 上 都 具有 
相应 的 位 置 值 。 彩 度 高 的 色 对 明度 有 很 大 的 影响 ， 不 太 容 易 辨 别 。 在 明亮 的 地 方 鉴别 色 的 明 

度 比较 容易 ， 在 瞳 的 地 方 就 难以 鉴别 ， 如 图 3-10 所 示 。 





网 站 页 面 UI 配色 






3-10 


Wr ee 无 彩色 系 和 有 彩色 系 。 无 彩色 则 指 黑 、 白 和 灰 等 中 
性 色 ， 有 彩色 是 指 请 如 红 、 绿 、 蔓 、 青 、 洋 红 和 黄 等 具有 “色相 ” 属性 的 颜色 。 





无 彩色 系 是 指 身 色 、 黑 色 和 由 自 色 与 黑色 调和 ， 形 成 的 各 种 深浅 不 同 的 灰色 。 无 彩色 按 
照 一 定 的 变化 规律 ， 可 以 排 成 一 个 系列 ， 由 自 色 渐 变色 浅 灰 、 中 灰 、 深 灰 、 黑 色 ， 色 上 度 学 上 
外 此 为 黑 自 系 列 。 黑 自 系 列 中 由 和 到 黑 的 变化 ， 可 以 用 一 条 垂直 轴 表 示 ， 一 端 为 自 ， 一 端 为 
中 间 有 名 种 过 渡 的 灰色 纯 白 是 理想 的 完全 反射 的 物体 ， 纯 黑 是 理想 的 完全 吸收 的 物 
体 。 无 彩色 系 的 颜色 只 有 一 种 基本 性 质 就 是 明度 。 它 们 不 有 具备 色相 和 纯度 的 性 质 ， 也 就 是 说 
它们 的 色相 与 纯度 在 理论 上 都 等 于 零 。 色 彩 的 明度 可 用 黑白 度 来 表示 ， 愈 接近 白色 ， 明 度 愈 
高 ， 合 接近 黑色 ， 了 明度 愈 低 。 如 图 3-11 所 示 为 两 款 无 彩色 系 的 网 页 界面 UI。 
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AKERE., 1, E Z A, FAE, ANA IRREAL 
色调 都 属于 有 彩色 系 。 有 有 5 色 是 由 光 的 波长 和 振幅 决定 的 ， 六 长 决 正 色相， 振幅 决定 色调 。 


o 5 e —————— 


网 站 UI 设计 第 2 版 
如 图 3-12 所 示 为 两 款 有 彩色 系 的 网 页 界面 UL, 
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配色 的 一 般 规 律 就 是 ， 任 何 颜色 都 可 以 以 主 色 的 身份 存在 ， 并 与 其 他 色相 挫 配 ， 组 合成 
对 比 色 ， 互 补 色 ， 邻 近 色 或 其 他 同类 色 天 系 的 色彩 组 合 


原色 是 最 基本 的 色彩 ， 主 要 包括 之 前 讲 过 的 光 的 三 原色 : 红 、 绿 、 莫 ， 以 及 色 的 三 原 
色 ， 青 、 洋 红 、 黄 。 这 几 种 颜色 相互 以 不 同 的 比例 混合 可 以 生成 其 他 颜色 ， 但 本 身 无 法 由 其 
他 颜色 合成 。 


将 任意 两 种 相 邻 的 原色 进行 混合 得 到 的 颜色 就 称 为 次 生 色 。 由 此 可 知 ， 光 学 混合 模式 中 
的 次 生 色 就 是 色彩 混合 中 的 原色 ， 因 此 加 法 混合 与 减法 混合 之 间 存 在 相互 天 系 。 


三 次 色 是 指 由 原色 和 次 生 色 混合 生成 的 颜色 ， 在 色 环 中 处 于 原色 与 次 生 色 之 间 。 由 于 红 、 
绿 、 蓝 和 青 、 洋 红 、 黄 互 为 次 生 色 ， 因 此 在 12 色 环 中 ， 除 原色 之 外 的 其 余 颜 色 都 是 三 次 色 。 


邻近 色 中 往往 都 包含 一 个 共有 的 颜色 ， 例 如 红色 、 玫 红色 和 详 红 色 ， 它 们 都 含有 大 量 的 
在 色相 环 上 任 选 一 色 ， A A 即 为 邻近 
色 。 邻 近 色 一 般 有 两 个 苑 围 ， 绿 、 监 、 紫 的 邻近 色 大 部 分 在 冷色 了 泥 围 内 ， 红 、 橙 、 黄 的 邻近 
名 大 部 分 在 暖色 范 CHA, 


互补 色 与 邻近 色 正 相反 ， 两 种 颜色 相互 派 合 产生 和 白色 或 灰色 ， 则 称 其 中 一 种 颜色 为 另 一 
种 颜色 的 互补 色 。 互 补 色 在 色 环 上 总 是 处 在 一 条 直线 的 两 六 。 如 果 将 互 寂 色 并 列 在 一 起 ， 则 
互补 色 的 两 种 颜色 对 比 最 强烈 、 最 醒目 ， 且 最 鲜明 。 


在 色相 环 中 相距 120° 或 者 120" 以 上 的 颜色 被 称 为 对 比 色 。 顾 名 思 义 ， 互 为 对 比 色 的 颜 
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色 从 视 况 上 给 人 一 种 对 立 的 感 项 。 事 实 上 ， 对 比 色 的 视 竞 对 立 感 仅 次 于 互补 色 。 


G) E RTE A A R DE i it P DOPE a: 





色彩 是 自然 美 、 生 活 美 的 重要 组 成 部 分 。 网 页 色彩 设计 是 遵循 科学 与 技术 的 内 在 关系 ， 
对 色彩 进行 极 富 创意 化 和 理想 化 的 组 合 过 q 是 伴随 着 理性 与 感性 的 创作 过 程 。 

从 网 页 设计 的 发 展 趋 势 来 看 ， 任 何 一 个 网 页 设计 作品 都 离 不 开 色 彩 。 从 色彩 学 角度 看 ， 以 
黑白 为 两 端的 灰色 系列 都 是 完全 的 不 Wa 或 者 称 为 无 彩色 系 ， 而 通常 人 们 易于 辨识 的 

登 、 黄 、 绿 、 蓝 、 紫 ， 以 及 由 这 此 基本 色 沪 合 而 产生 出 的 所 有 色 和 多 则 被 称 为 有 彩色 系 。 实 
际 上 ,“ 色 彩 ” 这 一 概念 就 是 由 无 彩色 和 有 彩色 两 种 类 型 的 色彩 构成 的 ， 因 此 在 任何 网 页 UI 设 
计 中 ， 色 彩 都 是 最 基本 的 元 素 。 如 图 3-13 所 示 为 两 款 色彩 搭配 精美 的 网 页 界面 UI。 








E 3-13 
色彩 应 用 于 网 页 UI 中 ， 可 以 给 带 来 鲜 活 的 生命 力 。 它 既是 网 页 界面 设计 的 语言 ， 


又 是 视觉 信息 传达 的 手段 和 方法 ， pp UI 设计 中 不 可 或 缺 的 重要 元 素 。 

网 页 传 违 的 信息 内 容 与 传 圳 方法 应 该 是 相互 统一 的 ， i eek 网 
页 中 不 同 的 内 容 需要 用 不 同 的 色彩 来 表现 ， 利 用 不 同色 彩 自身 的 表现 力 、 情 感 效应 及 审美 心 
理 感 党 ， 可 以 使 网 页 的 内 容 与 形式 有 机 地 结合 起 来 ， 以 色彩 的 内 在 力量 来 烘托 主题 、 突 出 主 
题 ， 如 图 3-14 所 示 。 
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A 

网 页 的 首要 功能 是 传递 信息 ， 色 彩 正 是 创造 有 序 的 视觉 信息 流程 的 重要 元 素 。 利 用 不 同 
的 色彩 划分 视觉 区 域 ， EE 在 网 页 界面 设计 中 同样 如 此 。 网 页 中 的 信 
轧 不 仅 数 量 多 ， 而 且 种 闫 繁杂 ， 往往 在 一 个 页 面 中 可 以 看 到 众多 信息 ， 特 别 是 门户 型 或 综合 
型 网 站 更 是 如 此 ， 这 就 水 及 到 了 信息 分 布 及 排列 的 问题 。 利 用 色彩 进行 划分 ， 可 以 将 不 同类 
型 的 信息 分 类 排 布 ， 并 利用 各 种 色彩 市 人 A 人 的 不 同心 理 效果 ， 很 好 地 区 分 出 主 次 顺序 ， 从 而 
形成 有 序 的 视觉 流程 ， 如 图 3-15 所 示 。 
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We 也 要 考虑 网 页 





浏览 者 的 目光 。 那 么 如 何 使 网 页 能 够 吸引 浏览 者 驻足 ， 这 就 需要 利用 色彩 
的 力量 ， 不 断 设 计 出 各 式 各 桩 的 网 页 界 a 网 页 中 的 色彩 应 用 ， 可 以 舍 芋 优 
雅 、 动 感 强烈 、 时 疝 新 颖 或 单纯 有 力 ， 无 论 采 用 哪 种 形式 ， 都 是 为 了 一 个 明确 的 目标 ， 即 引 
起 更 多 浏览 者 的 关注 ， 如 图 3-16 所 示 。 由 于 色彩 设计 的 特殊 性 能 ， 越 来 越 多 的 网 页 UI 设计 
师 认 识 到 ， 一 个 网 站 的 网 页 拥有 突出 的 色 采 设计 ， 对 于 网 站 的 生存 起 着 至 关 重 要 的 作用 ， 也 
迈 回 成 功 的 第 一 步 。 
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鲜 O 舍 ”网 站 页 面 UI 配色 


色彩 既是 视觉 传达 的 方式 ， 又 是 亏 术 设计 的 语言 。 色 彩 对 于 决定 网 页 作品 的 亏 术 品位 具 
有 举足轻重 的 作用 ， 不 仅 在 视觉 上 ， 而 且 在 心理 作用 和 和 象征 作用 中 ， 都 可 以 得 到 充分 体现 。 
好 的 色彩 应 用 ， 可 以 极 大 地 增强 网 页 的 亏 术 性 ， 也 使 得 网 页 更 富有 艺术 感 ， 如 图 3-17 所 示 。 
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PEL 联想 作用 与 心理 效果 


E A i e A 不 同 的 颜色 和 不 同 
J 情感 反应 ， 这 就 是 色彩 的 联想 作用 。 

o 没有 任何 感情 色彩 ， 人 们 由 于 长 时 间 的 认 知 和 感受 ， 自 然而 然 地 建 
立 起 一 僚 完 整 的 、 对 于 不 同 颜色 的 心理 感受 。 例 如 看 到 红色 就 联想 到 火焰 的 热情 与 暴躁 ， 看 
到 黄色 就 联想 到 太阳 的 和 照 与 温暖 ， 看 到 绿色 就 联想 到 小 草 的 清新 ， 如 图 3-18 所 示 。 

















色彩 本 身 并 无 冷暖 之 分 ， 只 是 人 们 通过 视 党 效应 延伸 出 来 的 心理 。 例 如 看 到 红色 、 禁 色 
和 黄色 就 会 联想 到 太阳 、 火 商 、 烛 光 等 温暖 的 事物 ， 看 到 蓝 色 、 青 色 和 紫色 就 会 联想 到 冰 
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雪 、 下 雨 、 海 洋 等 冰凉 或 空旷 的 事物 ， 如 图 3-19 所 示 。 
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色彩 的 冷暖 不 仅仅 体现 在 固定 的 色 向 上 ， 还 体现 在 色相 的 倾 问 性 ， 云 彩 是 这 一 现象 最 经 
典 的 体现 。 男 旨 霞 时 ， 为 了 去 现 出 清冷 的 感 况 ， 往 往 会 加 入 一 些 玫 红色 。 而 在 国 晚 晨 时 ， 则 
会 添 入 大 量 的 橙 红 色 和 黄色 ， 用 来 表现 浓郁 而 热烈 的 氛围 ， 如 图 3-20 所 示 。 
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色彩 的 色相 与 软 硬 感 没有 六 大 的 关系 ， 但 是 不 同 的 明度 和 饱和 上 度 会 给 人 强烈 的 软 硬 差 距 
感 。 一 般 来 说 ， 高 明度 、 高 饱和 的 颜色 看 起 来 更 加 柔软 ， 例 如 云 未 、 栅 花 、 布 料 和 伦 辩 等 。 
低 明 度 、 低 纯度 的 颜色 则 给 人 感 苋 坚硬 厚重 ， 例 如 钢铁 、 汽 车 等 ， 如 图 3-21 所 示 。 
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暖色 和 高 明度 的 颜色 总 会 给 人 以 莲 松 、 和 柔软 、 上 升 和 轻盈 的 感觉 ， 因 此 有 强烈 的 膨胀 


或 。 冷 色 和 低 明 度 的 颜色 则 会 给 人 以 冰冷 、 坚 硬 、 内 伍 和 沉稳 的 感觉 ， 因 此 有 后 退 和 收缩 的 
感觉 ， 如 图 3-22 所 示 。 


已 
/ 心 
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色彩 的 轻重 感 主要 通过 颜色 的 明度 来 体现 。 一 般 来 说 ， 明 度 比较 高 的 颜色 给 人 以 密度 
小 、 重 量 经 、 漂 浮 和 敏捷 的 感觉 ， 例 如 蓝天 、 和 白云 、 羽 毛 和 彩虹 等 。 明 度 较 低 的 颜色 则 给 人 
以 密度 大 、 重 量 大 、 下 沉 、 沉 稳 和 含蓄 的 感觉 ， 例 如 人 金属、 皮革 等 物体 ， 如 图 3-23 所 示 。 
在 网 页 界面 设计 中 ， 根 据 网 页 需要 表达 的 内 容 ， 选 择 合适 的 颜色 是 非常 重要 的 。 
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SHE, BEE. SUEE RMB SA ADORA. HRE TINA, RAE., 1% 
明度 的 颜色 则 会 给 人 以 庄重 、 沉 静 、 内 化 和 正式 的 感觉 。 一 般 来 说 ， 儿 童 类 插画 多 选用 天 
监 、 楼 黄 、 黄 色 、 粉 红 和 嫩绿 等 较为 活泼 的 颜色 ， 以 契合 儿童 活泼 可 爱 的 天 性 。 而 一 些 珠 
E, AFANES mSHE, AL, A ALS, DATE ANAR RAAN 
品质 感 ， 如 图 3-24 所 示 。 
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决定 色彩 兴奋 程度 的 主要 因素 为 色相 和 饱和 度 。 总 体 来 说 ， 红 色 、 检 色 和 黄色 等 高 饱和 
度 的 上 暖色 会 给 人 以 兴奋 的 感 芹 ， 监 色 、 青 色 和 紫色 等 低 饱 和 度 的 冷色 会 给 人 以 沉静 的 感觉 ， 
如 图 3-25 所 示 。 


MOTION EXTREME 
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IAB TE AE RARA RRA ARA, RA, SAMERNA, KA 


紫红 等 色彩 会 给 和 人 以 华丽 、 高 贵 和 硅 张 的 感 融 ， 低 饱和 度 的 棕色 、 土 黄 、 黑 、 白 、 灰 等 色彩 
则 会 给 和 人 朴素、 柔和 及 复古 的 感 物 ， 如 图 3-26 所 示 。 
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网页 配色 标准 





网 页 的 传播 沁 围 很 广 ， 为 了 保证 一 个 页 和 面 在 大 部 分 用 户 的 屏 万 上 能 够 正 党 显示 ， 因 此 对 
网 页 配色 有 一 套 严 格 的 标准 。 设 计 师 只 有 按照 标准 选用 颜色 ， 才 能 够 保证 用 户 看 到 的 实际 页 
面 效 果 和 设计 师 设 计 出 的 效果 相同 。 


为 了 解决 Web 调 色 板 的 问题 ， 人 们 一 臻 通过 了 一 组 在 所 有 浏览 器 中 都 类 似 的 Web 安全 
颜色 。 这 些 颜 色 使 用 了 一 种 颜色 模型 ， 在 该 模型 中 ， 可 以 用 相应 的 16 制 进 制 值 00、33 、 
66、99、CC 和 FF 来 表达 三 原色 中 的 每 一 种 。 这 种 基本 的 Web 调 色 板 将 作为 所 有 的 Web X 
览 器 和 平台 的 标准 ， 它 包括 了 这 些 16 进 制 值 的 组 合 结果 。 这 就 意味 着 ,我 们 潜在 的 输出 结 
果 包 括 6 种 红色 调 、6 种 绿色 调 、6 种 蓝 色 调 。6 x6 x6 的 结果 就 给 出 了 216 种 特定 的 颜色 ， 
这 些 颜 色 就 可 以 安全 应 用 于 所 有 的 Web 中 ， 而 不 需要 担心 颜色 在 不 同 应 用 程序 之 间 的 变化 ， 
如 图 3-27 所 示 。 
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在 Photoshop 中 ， 用 户 可 以 在 “ 色 板 ”面板 中 载 入 216 种 Web 安全 颜色 ， 以 确保 应 用 到 
网 页 中 的 颜色 全 部 可 以 被 正 前 显示 。 

用 户 可 以 执行 “窗口 > 色 板 ”命令 ,打开 “ 色 板 ”面板 。 单 击 面 板 右 上 方 的 按钮 ， 在 
弹出 的 面板 菜单 中 选择 “Web 安全 颜色 ”选项 ， 即 可 使 用 Web 安全 色 蔡 换 色 板 中 的 默认 颜 
色 ， 如 图 3-28 所 示 。 










TRUMATCH 颜色 
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VisiBone2 

Web 色相 





关闭 选项 卡 组 
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U ER 
单 击 “ 色 板 ” 面 板 中 的 一 个 小 色 块 ， 即 可 快速 将 其 指定 为 新 的 “前 景色 ”或 “ 背 
景色 ”。 使 用 面板 下 方 的 按钮 ， 可 使 用 当前 前 景色 创建 新 的 颜色 样本 ， 使 用 删除 按钮 可 
以 删除 指定 的 颜色 样本 。 


G3 色彩 中 的 功能 角色 


在 网 员 设 计 中 ， 不 同 的 颜色 担当 看 不 同 的 角色 ， 大 致 可 分 为 主 色 、 表 景色、 融合 色 和 强 
调 色 。 


在 网 页 设计 中 ， 主 色 就 比 其 他 配色 要 明显 、 清 楚 和 强烈， 使 浏览 者 一 眼 可 以 看 到 ， 从 而 
使 视线 固定 下 来 ， 达 到 传达 中 心思 想 的 作用 ， 如 图 3-29 所 示 。 











Mins spend hoi whole Ives loving us, and CORD beyond lo make ) weto Good 


Do fo samo foe your w Mothers Day by creating a pereonalized website 
hor ifai puts al hose words you find so haed to say, mío a bo i scrolling love Mitor 





图 3-29 
舞 合 中 心 是 主角 ， 但 决定 整体 印象 和 效果 的 是 背景 。 相 同 的 道理 ， 在 决定 网 页 配色 的 时 


候 ， 如 果 背 景色 十 分 素雅 ， 则 整个 页 面 也 会 变 得 素雅 ， 如 果 背 景色 明亮 ， 整 个 网 页 也 会 给 
明亮 的 感觉 ， 如 图 3-30 所 示 。 
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网 站 页 面 UI 配色 


通 前 情况 下 ， 网 站 页 面包 含 多 种 颜色 ， 除 了 具有 人 鲜明 色彩 的 主题 色 以 外 ， 还 需要 有 一 些 
者 衬 主 题 的 辅助 色 。 辅 助 色 的 视觉 效果 需要 次 于 主题 色 ， 并 且 可 以 起 到 烘托 主题 的 效果 。 
过 使 用 辅助 色 ， 可 以 使 页 面 变 得 更 加 鲜 活 并 充满 活力 ， 如 几 3-31 所 示 。 但 需要 注意 ey 
对 于 辅助 色 的 使 用 面积 应 当 适 当 ， 过 大 或 过 亮 都 会 弱化 主题 色 ， 使 页 面 美 观 性 和 实用 性 
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35.4 ARË ss 

HAD E A AB EC, MEA, CE, HARE MAA, ARABIA 
党 采用 强烈 的 色彩 ， 通 党 以 对 比 色 的 形式 出 现 。 所 级 色 的 使 用 通常 是 用 来 打破 单调 的 网 页 结 
构 ， 萌 造 生 动 的 网 页 空间 氛围 。 有 些 时 候 为 了 页 面 的 协调 性 ， 也 会 选用 与 背景 色 接 近 的 色 
彩 ， 如 图 3-32 所 示 。 


c] WORLD TURTLE 






wonk sour Weightshift 


Vi mamen på visdom 


World n mn mål ati arpei opis 
Mycket $ orreina 
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ARERI 
在 对 网 页 进行 配色 时 ， 要 做 到 整体 协调 统一 ， 重 点 色 突 出 ， 还 要 巧妙 、 合 理 地 过 渡 几 种 


o 67 ee- 一 


Murt 计 第 版 co 
冲突 的 颜色 。 此 外 还 要 特别 注意 文字 的 颜色 ， 最 好 能 够 选择 与 背景 反差 大 的 颜色 ,这样 更 利 
于 阅读 。 

色彩 搭配 在 网 页 设计 中 是 十 分 重要 的 ， 色 彩 的 取 用 更 多 的 是 个 人 经 验 和 感觉 ， 如 图 3-33 
PTR o 


5 Z008 Consumer Electronice shou AsaCafe 。 


Menu tion Gallery Community 
See it all. 
Premium Coffee AsaAmericano 
- Srl 
后 CNY E 
> [NT WE EE 101 
IES E Aa] ij 
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任何 形式 的 设计 部 要 注意 整体 色调 的 协调 一 致 性 ， 网 页 设计 同 杆 如 此 。 整 体 色调 的 选择 

要 根据 网 页 想 要 表达 的 内 容 来 决定 。 首 先 ， 要 在 配色 中 确定 占 大 面积 的 主 色 调 凑 色 ， 根据 
主 色 选 用 不 同 的 配色 方案 ， 并 从 中 迁 择 最 合适 的 。 只 有 人 全面 控制 好 构成 页 和 面 的 色彩 的 色相 、 
饱和 度 、 明 上 度 和 面积 关系 ， 才 能 使 最 终 页 面 在 视觉 上 呈现 出 高 度 协调 一 致 的 效果 ， 从 而 达到 
传达 信息 的 目的 ， 如 图 3-34 所 示 。 
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配色 的 平衡 就 是 指 颜 色 的 强 弱 、 轻 重 和 浓淡 这 几 种 关系 的 平衡 。 即 使 在 网 页 中 使 用 相同 
的 配色 ， 也 要 考虑 图 形 的 形状 和 面积 ， 以 此 来 决定 是 否 成 为 调和 色 。 一 般 而 言 ， 同 类 配色 较 
为 平衡 ， 如 图 3-35 所 示 。 


-OO 9 





EE ”网 站 页 面 UI 配 色 


& 
会 人 
A AA 
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ER, TORRE AFM, EXE E LARA RANA 
X, ERRE) MAREA A, DEI EARARIAASAR, MIRAN 
意 ， 如 图 3-36 所 示 。 


CLAIM YOU PLACE IN SPACE 
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Um 
在 布局 重点 色 时 ， 要 特别 注意 色 块 与 其 他 颜色 的 协调 程度 。 如 果 版 面色 彩 过 于 突 





元 ， 就 要 考虑 使 用 其 他 中 性 色 进 行 调和 。 


配色 的 节奏 

颜色 配置 产生 整体 的 色调 ， 这 种 配置 反复 出 现 和 排列 就 形成 了 节奏 。 这 种 配色 节奏 与 颜 
色 的 排列 方式 、 形 状 和 质感 等 因素 有 关 。 由 于 逐渐 改变 色相 、 明 度 和 纯度 ， 会 使 配色 产生 有 
规律 的 变化 ， 将 色相 、 明 上 暗 和 强 弱 等 变化 反复 应 用 ， 就 会 产生 反复 的 节奏 ， 也 可 以 通过 色彩 
赋予 网 页 跳跃 和 方向 感 ， 从 而 产生 动 的 市 秦 ， 如 图 3-37 所 示 。 


webfiow 


Create professi 
Wi ut any code 
Product ro Pro fit 


2m+ ] 2j 
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当 页 面 中 包含 两 种 或 两 种 以 上 的 不 协调 颜色 时 ， 就 需要 使 用 其 他 颜色 进行 调和 及 过 渡 。 
通常 可 以 使 用 两 种 方法 调和 不 协调 的 颜色 ， 一 是 使 用 大 面积 的 黑 、 和 白 、 灰 等 中 性 色 进 行 调 
和 ， 二 是 使 用 两 种 对 比 色 中 间 的 几 种 颜色 平滑 过 渡 二 看 ， 如 图 3-38 所 示 。 


Services Solutions 


Sample 


Sample 


About Us 


Support 
Copyright O 2010 
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"实例 “制作 简约 网 站 主页 


本 实例 主要 帮助 用 户 了 解 网 页 设计 流程 及 简单 的 网 页 UI 制作 。 此 款 界 面 主要 以 橙 红 色 
A 辅助 色 使 用 了 黄色 ， 强 调 色 运用 了 黑色 ， 主 界面 将 图 片 进行 精密 排列 ， 整 体 结构 清 
制作 难度 不 大 ， 硕 望 用 户 细心 耐心 制作 。 





mN 
pa pde Ree 


使 用 到 的 拉 术 





学 习 时 间 
视频 地 址 视频 \ 第 3 章 \ 制作 简约 网 站 主页 . mp4 


产 文 件 地 址 产 文 件 \ 第 3 章 \ 制作 简约 网 站 主页 psd 











EE ”网 站 页 面 UI 配 色 





Q001 有 执行 “文件 > 新建 ” 
命令 ,设置 如 图 3-39 所 
示 的 参数 。 执 行 “ 窗 口 > . 
字符 ”命令 , 打开 “ 字 | 
符 ” 面 板 ATAR: 
“字符 ”面板 中 设置 字体 : 
颜色 为 RGB (255, 132, | 
0) ， 如 图 3-40 所 示 。 


TIT TE ATTE 
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VU 提示 
在 Photoshop 中 新 建文 档 有 两 种 方法 ， 可 以 通过 执行 “文件 > 新 建 ” 命令 ， 也 可 以 





使 用 快捷 键 “Ctrl +N”, 


(03 单 击 工具 箱 中 的 : 

“ 横 排 文 字 工具 ”按钮 ， My FICYIVE 
在 画布 中 输入 两 种 颜色 的 : 
文字 ， 如 图 3-41 所 示 。 | 
继续 打开 “字符 ”面板 : 
设置 相关 参数 ， 如 图 3-42 | 
所 示 。 

| E] 3-41 

《c3 使 用 “ 横 排 文字 工 

R” 继续 在 画布 中 输入 文 FICYIVE 
+, 如 图 3-43 所 示 。 继 : 

续 在 打开 的 “字符 ” 面 

板 中 设置 参数 ， 如 图 3-44 | 





所 示 的 形状 。 
: 图 3-43 图 3-44 
04 “ 模 排 文字 工 | 
04 有 使 用 “ 横 排 文 字 | FICYIVE 





具 ”， 在 画布 中 输入 文字 ，| 和 ee -ems oa ompany 
如 图 3-45 所 示 。 单 击 工 
具 箱 中 的 “和 矩形 工具 ”: 
按钮 ， 在 画布 中 绘制 RGB | 
(255、132、0) KE, 
如 图 3-46 所 示 。 | 3-45 3-46 


UA 网 站 UI 设计 第 2 版 96 一 一 一 一 一 一 一 一 一 一 一 一 一 


ompany 


相似 内 容 操作 ， 如 图 3-47 | ee 
所 示 。 单 击 工具 箱 中 的 : 
“矩形 工具 ”按钮 ， 设 置 | 
和 矩形 的 宽 高 为 1000 x 364 | 
像素 ， 在 画布 中 绘制 任意 : 
颜色 的 矩形 ， 如 图 3-48 ; 2 3-47 E 
所 示 。 


使 用 相 [a] T 法 完 成 | FICYIVE y FICYIVE 








FICYIVE 
ompany 


《6 执行 “文件 > 打开 ” 
命令 ， 打 开 素 材 图 像 , 使 : 
用 “移动 工具 ”将 图 像 : 
移入 设计 文档 中 ， 效 果 如 | 
图 3-50 所 示 。 执行“ 图 
B> 创建 剪贴 蒙 版 ” 命 : 
令 ， 效 果 如 图 3-49 所 示 。 i 
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(Dase EI EST 
具 ” 在 画布 中 绘制 RCB : 

(255、180、0) E, 5% ¡ 
280 x 209 像素 的 矩形 ， 
如 图 3-51 所 示 。 再 次 打 | 
开 “ 字 符 ” 面板， 设置 : 
相关 人 参数， 如 图 3-52 
所 示 。 
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(05 使用“ 横 排 文 字 工 : 


a Customer Login Customer Login 
具 ” 在 画布 中 输入 文子 ， 上 和 EA 
如 图 3-53 所 示 。 单 击 工 : | 
an Sar IA” ¡AA ee 


按钮 ， 在 画布 中 绘制 RCB | ee 
(255、255、255) 宽 、 高 : 
为 150 x 24 像素 的 矩形， 
如 图 3-54 所 示 。 ’ 3-53 3-54 





-人 72 0 
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《cg 单 击 工具 箱 中 的 
“ 模 排 文字 工具 ”， 设 置 am 
如 图 3-55 所 示 的 参数 ， 
在 画布 中 输入 文字 。 再 次 : 
打开 字符 面板 ,设置 相关 | 
参数 ， 如 图 3-56 所 示 。 | 
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CJA AHLI 
具 ” 在 画布 中 输入 相应 文 : 
字 , 如 图 3-57 所 示 。 继 
续 打 开 字 符 面 板 ， 参 数 设 : 
置 如 图 3.58 所 示 。 
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《11 使 用 相同 方 法 完成 : My FIGYIVE p ẸICYIVE 
文字 内 容 的 输入 和 和 矩形 的 Pr 

绘制 ， 如 图 3-59 所 示 。 
网 页 最 终 效 果 如 图 3- 60 | 
所 示 。 
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3.6.2 确定 网 页 主题 色 
不 同 的 色彩 具有 有 不同 的 意象 ， 红 色 代 表 热 烈 奔 放 ， 黄 色 代 表 温 上 暧 活 泌 ， 监 色 使 人 沉静 忧 
F, == 6, RAAUA E MNR, MEN, 一定 要 遵循 整体 协调 统一 、 局 部 重 扎 
突出 的 原则 ， 首 先 仔细 考虑 页 面 想 要 传达 的 信息 和 和 情感， 选择 最 合适 的 颜色 作为 整体 色调 。 
虽然 网 页 设计 对 于 颜色 的 使 用 数量 没有 任何 限制 ， 但 为 了 整体 效果 的 协调 一 致 性 ， 建 议 
不 要 使 用 过 多 的 主题 色 。 如 图 3-61 所 示 为 两 款 合 理 的 网 站 页 面 。 





o “8 一 
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ON 


Sell anything, anywhere 
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相 较 于 图 片 和 图 形 而 言 ， 文 字 配 色 需 要 考虑 到 可 读 性 和 可 识别 性 。 因 此 ， 在 文本 配色 和 
背景 色 的 选择 上 需要 思考 一 下 。 为 了 可 识别 性 强 ， 文 本 配色 需要 与 背景 色 有 了 明显 差异 ， 这 时 
主要 使 用 的 配色 是 明度 的 对 比 配 色 或 利用 补 色 关系 的 配色 。 


想 要 在 网 页 中 适当 使 用 颜色 ， 需 要 考虑 网 页 中 各 个 要 素 的 符 幢 。 育 景 和 文字 使 用 的 闫 色 
相近 ， 会 影响 文子 可 读 性 ， 文 本 的 子 号 发 生变 化 后 ， 颜 色 也 需要 发 生变 化 。 如 果 育 景色 选用 
乌 或 灰 灰色 ， 文 字 搭 配 较为 简单 ， 可 识别 性 强 ， 如 图 3-62 所 示 。 如 果 想 要 使 用 个 性 化 的 
背景 色 ， 文 字 配 色 的 选择 就 需要 经 过 仔细 考虑 ， 既 要 保证 页 面 整体 的 一 致 性 ， 也 要 保证 文字 
可 读 性 ， 如 图 3-63 所 示 。 
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文本 配色 除了 注重 原则 以 外 ， 还 要 符合 以 下 几 个 要 素 。 
O 顺应 政治 、 经 济 和 时 代 变 化 。 
O 明显 区 别 于 其 wa 需要 与 欢 不 同 。 
@ 浏览 者 看 到 不 REIA., 
@ 与 图 片 、 dais 其 他 元 素 搭 配 协 调 。 
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EE 网 站 页 面 UI 配 公 


O 考虑 设计 效果 、 设 计 情 感 和 设计 思想 。 


4 人 人 实例 “制作 公司 宣传 主页 


j 
NS 
2 









ss 


本 实例 主要 帮助 用 户 了 解 网 页 中 文本 配色 的 方式 和 和 方法。 此 款 界 向 属于 公司 宣传 类 ， 因 


此 主 界 面 及 用 了 灰色 为 主 色 调 ， 文 本 用 到 了 白色， 界面 整体 简洁 明明 ， 文 字 可 识别 性 强 ， 便 
于 浏览 者 采集 需要 的 信息 。 


[ HAILA. EIA. MELIA 








源 文件 \ 第 3 章 \ 制作 公司 宣 


《1 执行 “文件 > 新 建 ” 司 二 下 
命令 ， 设 置 如 图 3-6 所 : IIS 
示 的 参数 。 单 击 工具 箱 中 : 
Ø EETA” H, 
在 画布 中 绘制 RGB (84, 5 
92.95) (63% 形 ， 如 | 国生 生生 生生 生生 和 
3-65 所 示 。 : REKEM: | 方形 像素 


ay 当 
3 48 


+ 

e 

Ed 
Eb 


Tr 5 
$0 Y 
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(0 有 单 击 工具 箱 中 的 
“矩形 工具 ”按钮 ， 在 画 | 
布 中 绘制 RGB (67, 74, 、: 
76) 的 矩形 ， 如 图 3-66: 
所 示 。 单 击 工具 箱 中 的 
HAIA” RHA, RE 
路 径 操 作为 “合并 形 
状 ”， 在 画布 中 绘制 圆 形 ，: 图 3-66 图 3-67 
如 图 3-67 所 示 。 








hotoshop 网 站 UI 设计 第 2 版 9 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 


使 用 “椭圆 工具 ”绘制 椭圆 时 ， 按 住 Shift 键 的 同时 ， 拖 动员 标 左 键 即 可 绘制 正 





03 有 执行 “文件 > 打开 ” 
命令 ， 打 开 素材 图 像 “ 素 
材 > 第 3 章 >36301. png” 
并 拖 入 到 画布 合适 位 置 ， 


。 按 住 快 捷 键 Alt + Shift 的 同时 ， 拖 动 鼠 标 左 键 ， 即 可 绘制 从 中 心 出 发 的 正 圆 形 。 
图 像 效果 如 图 3-68 所 示 。 
a A 


M 
: Folin 
EIR” 24H, MáÉMA . 


le 
绘制 任意 颜色 的 圆 角 算 ， 
形 ， 如 图 3-69 所 示 。 


Cds «az mu Pl = 
底部 和 “添加 图 层 样式 ” [EA ar = 
式 ” 对 话 框 中 选择 “内 阴 : : | a 
影 ” 选 项 ， 设 置 如 图 3-70 E 
所 示 的 参数 。 继 续 选 择 sea Sy o mms 


SJL ! % 
j RES =” 选项 ， paa e BEJANE BARWA 


IEK 


如 图 3-71 所 示 的 参数 。 : 





| 3-68 Š] 3-69 





[Š] 3-70 


确定 
取消 
HER (WO... 


预览 (V) 


REA RARUS 





图 3-71 


© TY 0 





(o e” 
选项 ， 设 置 如 图 3-72 所 
示 的 参数 。 最 后 选择 “ 投 : 
影 ”选项 ， 设 置 如 图 3-73 | 


所 示 的 参数 。 


(06 单 击 工具 箱 中 的 
“ 横 排 文字 工具 ”按钮 ， 
设置 如 图 3-74 所 示 的 参 
数 ， 在 画布 中 输入 文字 。 
使 用 相同 方法 完成 其 他 文 : 
字 的 输入 如 图 3-75 


Ms 


人 007 有 有 单 击 工具 箱 中 的 
“直线 工具 ”按钮 ， 设 置 
线条 粗细 为 1 像素 ， 在 画 : 
布 中 绘制 白色 直线 ， 如 
图 3276 所 示 。 单 击 “ 图 
层 ” 面 板 底部 的 “添加 图 : 
层 样 式 ” 按 钮 ， 在 弹出 的 : 
“图 层 样式 ”对 话 框 中 选择 : 
“FHRA ER, REM 


3-77 所 示 的 参数 。 








网 站 页 面 UI 配 色 
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HEZ 
ME 


AE ÍA 复位 为 默认 值 
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确定 
取消 
FEH AW)... 


O s 


JRE 1 i 
品质 

ik y PREE (L 
AAN): de 0 
0 图 层 挖 空 投影 (U) 
NE 复位 为 默认 值 
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《Ca] 单 击 工具 箱 中 的 “ 横 : 
排 文字 工具 ”"， 在 画布 中 输 : 
入 如 图 3-78 所 示 的 文字 。 | 
单 击 工具 箱 中 的 “ 圆 角 矩 
形 工具 ”按钮 ， 在 画布 中 
绘制 任意 颜色 的 圆 角 和 矩形 ， 
并 设置 相应 图 层 样 式 , 图 : 


像 效 果 如 图 3-79 所 示 。 


人 (09 有 单 击 工具 箱 中 的 
在 画 | 
布 中 输入 如 图 3- 80 所 示 : 
的 文字 。 单 击 图 层面 板 底 : 
部 的 “添加 图 层 样式 ” 
按钮 ， 在 弹出 的 “图 层 样 
式 ” 对 话 框 中 选择 “ 投 : 
影 ”选项 ， 设 置 如 图 3-81 


“ 模 排 文字 工具 ”， 


所 示 的 参数 。 


ko 单 击 工 具 箱 中 的 
“ 自 定义 形状 工具 ” 按 
钮 ， 在 画布 中 绘制 RGB: 
(84. 92. 95) 的 图 形 , : 
如 图 3-82 所 示 。 使 用 相 
同方 法 完成 相似 内 容 的 制 : 


作 ， 如 图 3-83 所 示 。 


《1 执行 “文件 > 打开 ”: 
命令 ， 打 开 素 材 图 像 “ 素 ， 
材 > 第 3 章 >36302. png” | 
合适 位 置 ， 
图 像 效 果 如 图 3-84 所 示 。| 
单 击 图 层面 板 底部 的 “ 添 : 
加 图 层 样式 ”按钮 ， 在 弹 : 
出 的 “图 层 样式 ”对 话 | 


HERAS A 


框 中 选择 “投影 ”选项 ， 


设置 如 图 3- 85 所 示 的 
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项 目 名 称 


司 用 文字 工具 (T) 添 加 一 个 水 平 线 下 面 的 文本 块 . 使 用 
自 色 的 字体 Helvetica 和 大 小 13 pt. 进入 角色 面板 (Win- 
dow > 字符 ) 并 设置 主要 类 型 的 行 与 行 之 间 的 距离 )24 pt 


EXA ATA, 进入 角色 面板 (Window > 字符 ) 并 
设置 主要 类 型 的 行 与 行 之 间 的 距离 )24 pt 使 文本 更 具 可 
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项 目 名 称 


使 用 文字 工具 (T) 添 加 一 个 水 平 线 下 面 的 文本 块 . 使 用 
自 色 的 字体 Helvetica 和 大 小 13 pt. 进入 角色 面板 (Win- 
dow > 字符 ) 并 设置 主要 类 型 的 行 与 行 之 间 的 距离 )24 pt 
使 文本 更 具 可 读 性 , 进入 角色 面板 (Window > 字符 ) 并 
设置 主要 类 型 的 行 与 行 之 间 的 距离 )24 pt 使 文本 更 具 可 
读 性 。 
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3-82 








项 目 名 称 


使 用 文字 工具 (T) 添 加 一 个 水 平 线 下 面 的 文本 块 。 使 用 
和 白色 的 字体 Helvetica 和 大 小 13 pt. 进入 角色 面板 (Win- 
dow > 字符 ) 并 设置 主要 类 型 的 行 与 行 之 间 的 距离 )24 pt 
使 文本 更 具 可 读 性 . 进入 角色 面板 (Window > 字符 ) 并 
设置 主要 类 型 的 行 与 行 之 间 的 距离 )24 pt 使 文本 更 具 可 
读 性 。 


AR (L) 


图 层 控 空 投影 (U) 
设置 为 默认 值 ABRA 
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CETRA 
圆 工 具 ” 按 钮 ， 在 画布 中 | 
绘 $] RGB (169, 173.. 
175) 的 圆 形 ， 图 像 效 果 如 
图 3-86 所 示 。 单 击 图 层面 
板 底部 的 “添加 图 层 样式 ”| 
按钮 ， 在 弹出 的 “图 层 样 
式 ” 对 话 框 中 选择 “ 描 
边 ” 选 项 ， 设 置 如 图 3-87 | 


所 示 的 参数 。 


(13 有 使 用 相同 方法 完成 
相似 内 容 的 制作 ， 图 像 效 
果 如 图 3-88 所 示 。 将 相 : 
关 图 层 编组 ， 重 命名 为 : 
“上 ”， 图 层面 板 如 


3-89 所 示 。 


Gesta : 
形 工具 ”按钮 ， 在 画布 中 
绘制 RGB (73, 79, 83): 
的 矩形 ， 如 图 3-90 所 示 。 | 
单 击 图 层面 板 底部 的 “ 添 
加 新 的 填充 或 调整 图 层 ” 
按钮 ， 在 子 菜单 中 选择 
“渐变 填充 ”选项 ， 设 置 如 | 


3-91 所 示 的 人 参数。 


《015] 单 击 工具 箱 中 的 “ 直 
RTA” H, RERS 
粗细 为 1 像素 ， 在 画布 中 ; 
绘制 白色 直线 ， 如 图 3-92 : 
所 示 。 单 击 图 层面 板 底部 | 


的 “添加 图 层 样 式 ” 按 钮 ， 


在 弹出 的 “图 层 样式 ”对 : 
话 框 中 选择 “图 案 一 加”. 
选项 ， 设 置 如 图 3-93 所 示 : 
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3-90 


3-92 
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站 Hs "ry 


v FIEBRE: 100% ~ 
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Aa 15%: 100% 


优 色 {D) 
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EE 
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tahi (S): a 
SAEZ (K) 


设置 为 默认 值 


复位 为 默认 值 





确定 
取消 
新 建 样式 (W)..… 


预览 (V) 


Y 


2 
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单 击 工 具 箱 中 的 : 
“ 横 排 文字 工具 ”， 在 画 
布 中 输入 如 图 3-94 所 示 的 
文字 。 单 击 工具 箱 中 的 
“ 圆 角 矩 形 工具 ”按钮 , 在 
画布 中 绘制 任意 颜色 的 圆 
PERO, TORA ， 
层 样式 ， 图 像 效果 如 图 3- ; 


95 所 示 。 


017 单 击 工具 箱 中 的 : 
“ 横 排 文 字 工具 ”， 在 画 
布 中 输入 文字 并 设置 相应 
的 图 层 样式 ， 如 图 3-96 | 
所 示 。 使 用 相同 方法 完成 : 
相似 内 容 的 制作 ， 如 图 3- : 


97 所 示 。 


Ga) 将 相关 图 层 编组 ，: 
重 命名 为 “中 ”， 图 层面 | 
板 如 图 3-98 所 示 。 单 击 : 
工具 箱 中 的 “矩形 工具 ” | 
按钮 ， 在 画布 中 绘制 RGB : 
(65, 69, 70) 的 和 矩形， 


如 图 3-99 所 示 。 


09 有 单 击 工 具 箱 中 的 
“ 横 排 文字 工具 ”， 在 画 
布 中 输入 如 图 3-100 所 示 ` 
的 文字 。 将 相关 图 层 编 : 
组 ， 重 命名 为 “下 ”， 图 


层 和 面板 如 图 3-101 Fr, 


关于 我 们 
使 用 文字 工具 (T) 添 加 一 个 水 平 线 下 面 的 文本 块 , 使 用 白色 
的 字体 Helvetica 和 大 小 13 pt. 进入 这 个 角色 的 面板 , 使 用 


文字 工具 (T) 添 加 一 个 水 平 线 下 面 的 文本 块 。 使 用 宇 体 申 界 
使 用 字体 Helvetica 宇 体 的 颜色 自 色 和 大 小 13 pt, 进入 这 个 
角色 的 面板 。 
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FAXPLAMAMN— APR FOO, RAS 
的 字体 Helvetica 和 大 小 13 pto 进入 这 个 角色 的 面板 , 使 用 

文字 工具 (T) 添 加 一 个 水 平 线 下 面 的 文本 块 。 使 用 宇 体 页 界 
使 用 宇 体 Helvetica 宇 体 的 颜色 和 白色 和 大 小 13 pt. 进入 这 个 
角色 的 面板 。 





a 


T Fæ 
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“提交 


3-100 








关于 我 们 

使 用 文字 工具 (T) 添 加 一 个 水 平 钱 下 面 的 文本 块 , 使 用 自 色 
的 字体 Helvetica 和 大 小 13 pt. 进入 这 个 和 角色 的 面板 , 使 用 
文字 工具 (T)j 添 加 一 个 水 平 线 下 面 的 文本 块 . 使 用 字体 真 界 


使 用 字体 Helvetica 宇 体 的 颜色 自 色 和 大 小 13 pto 进入 这 个 
角色 的 面板 。 
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网 由 风 格 影 响 配色 





不 同 的 颜色 往往 能 够 引起 人 们 不 同 的 情感 反应 ， 根 据 页 面 所 要 传达 出 的 具体 情感 ， 合 理 
选用 不 同 的 颜色 ， 是 每 个 网 页 设计 师 必须 具备 的 职业 素 乔 。 正 确 合理 地 使 用 相应 的 颜色 布局 


页 面 ， 可 以 使 制作 出 的 页 和 面 于 专业 和 更 美 观 ， 如 图 3-102 所 示 。 
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3.7.1 冷暖 配色 


暖色 主要 包括 红色 、 杰 红 色 、 黄 色 、 橙 黄色 和 黄 绿 色 等 色彩 。 上 暖色 系 为 主 色 调 的 页 面 往 
往 能 够 传达 给 浏览 者 一 种 阳光 温暖 、 积 极 向 上 和 热情 奔放 的 情感 。 通 常 来 说 ， 儿 童 类 网 站 往 
往 偏爱 暖色 调 的 页 面 效果 ， 如 图 3-103 所 示 。 
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冷色 主要 包括 绿 赣 色 、 监 色 、 青 色 、 青 监 色 和 紫色 等 色彩 。 以 冷色 为 主 色 调 的 页 面 一 般 
ARMADA, RE, ADORA. RA, DU ERE NADA ES 
分 的 电子 产品 企业 会 选用 冷色 调 作 为 网 站 的 主 色 调 ， 以 强化 企业 展 好 的 形象 ， 如 图 3-104 
所 示 。 
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汽车 维修 学 习 培 训 系 统 欢迎 进入 汽车 学 习 培训 系统 


各 车 系 维修 资源 


TIELAN) O la + 
SLIR OO E < 
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U 提示 
对 于 色相 环 中 冷暖 色 交 界 处 的 颜色 来 说 ， 有 时 很 难 断定 它们 到 底 是 冷色 还 是 暖色 。 
例如 绿色 ， 由 黄色 (上 暖色) 和 青色 (冷色 ) 混合 而 成 ， 当 绿色 中 的 黄色 居多 时 ， 它 是 暖 





色 。 当 绿色 中 的 青色 居多 时 ， 它 就 属于 冷色 。 


魏 色 属于 中 性 色 ， 它 可 以 完美 地 和 任何 颜色 搭配 在 一 起 使 用 ， 而 不 会 产生 任何 冲突 感 。 





自 色 的 包容 性 很 强 ， 本 身 也 没有 冷暖 的 倾 癌 ， 因 此 单 被 用 于 调和 几 种 对 立 的 颜色 ， 使 整体 版 
面 和 色调 更 加 平衡 。 

白色 与 暖色 挫 配 在 一 起 会 显得 温暖 平和 ， 与 冷色 搭配 在 一 起 会 显得 冰凉 理智 ， 和 低 纯 度 
的 颜色 搭配 在 一 起 也 会 显得 低调 而 有 魅力 ， 如 图 3-105 所 示 。 
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饱和 度 比 较 高 的 色彩 往往 会 传递 给 受众 一 种 活 泌 好 动 、 张 扬 个 性 和 古 灵 精怪 的 感觉 。 高 
彩 度 的 色彩 更 容易 吸引 用 户 的 注意 力 ， 所 以 一 般 网 页 中 的 Logo、 按 钮 和 图 标 等 零散 细碎 的 








EE 网 站 页 面 UI 配 人 色 


元 素 才 会 采用 。 
一 般 来 说 ， 儿 童 类 网 站 和 设计 公司 的 网 站 更 喜欢 采用 高 彩 度 配色 方案 ， 以 体现 出 活泼 可 
爱 和 个 性 奔放 的 感觉 ， 如 图 3-106 所 示 。 
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低 饱 和 度 的 色彩 会 给 人 一 种 温和 柔软 、 细 腻 仿 蓝 和 兼 收 并 鞭 的 感觉 。 色 彩 之 间 的 对 立 感 
往往 是 由 于 色相 与 饱和 度 引 起 的 ， 降 低 饱 和 度 则 意味 着 在 颜色 中 加 入 了 中 性 灰色 ， 自 然 也 会 
a 
感 路 线 的 网 站 往往 很 喜欢 这 种 低 彩 度 的 配色 ， 这 类 网 站 可 谓 将 协调 演绎 到 了 极 
至， 使 浏览 者 从 视觉 到 情感 都 由 襄 地 感到 舒适 和 民 意 ， 如 图 3-107 所 示 。 
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(38 影响 配色 的 元 素 


在 对 网 页 进行 配色 时 ， 可 以 使 用 强烈 的 颜色 ， 冷 衣 的 颜色 ， 也 可 以 使 用 日 党 不 常用 的 颜 
色 ， 但 不 能 盲目 使 用 闫 色 ， 讶 目 使 用 会 导致 界 辐 过 于 杂乱 。 


bd 的 印象 不 吓 绝 对 的 ， 但 多 数 人 会 自然 而 然 地 将 其 与 性 质 相 一 致 的 色彩 对 
号 入 座 ， 这 就 是 联想 的 作用 。 例 如 想到 咖啡 ， 就 会 联想 到 标 色 的 酶 厚 温暖 ， 想 到 医院 ， 就 会 
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联想 到 白色 和 蓝 色 的 冰 闵 冷静 ， 想 到 小 草 ， 就 会 联想 到 绿色 的 清新 鲜 活 。 

在 设计 和 制作 网 页 之 前 ， 首 先 应 该 仔细 调查 和 收集 各 种 数据 资料 ， 还 要 根据 色彩 的 基本 
要 素 加 以 规划 ， 以 便 玩 好 地 应 用 到 设计 中 。 下 面 是 根据 不 同行 业 的 特 挟 归纳 出 来 的 各 行业 形 
象 的 代表 色 。 

E 系 人 
服装 百货 、 服 务 行业 、 和 餐饮 行业 、 医 疗 药 品 、 数 码 家 电 
J 业 、 建 筑 行业 、 娱 乐 行业 、 服 装 百货 、 工 作 室 
JE. BRET, EE, TAE, REBT, KA, ARRE 
教育 培训 、 水 果蔬 菜 、 工 业 设计 、 印 刷 出 版 、 交 通 旅游 、 医 疗 保健 、 环 境 保护 、 音 乐 、 园 林 


教育 培训 、 水 族 馆 、 企 业 公司 、 进 出 口 贸易 、 航 空 、 冷 饮 、 旅 游 、 工 业 化 工 、 航 海 、 新 闻 媒 体 、 
生物 科技 、 财 2 3 证 券 


爱情 婚姻 、 女 性 用 品 、 化 妆 品 、 美 容 保养 、 社 区 论坛 、 奢 侈 品 

女性 用 品 、 爱 情 婚姻 、 化 妆 品 、 美 容 保 养 

工业 设计 、 电 子 杂 志 、 博 客 日 记 、 宠 物 玩具 、 运 输 交 通 、 建 筑 衣 壮 、 律 师 、 企 业 顾问 

黑色 系 BJE, ZA, WA, AFRE 

AER 金融 保险 、 银 行 、 珠 宝 、 电 子 机 械 、 医 疗 保健 、 电 子 商务 、 公 司 企业 、 自 然 科 学 、 生 物 科技 














= 




















如 图 3-108 所 示 为 网 页 界面 ， 使 用 表现 科技 元 素 的 黑色 作为 主 色调 ， 和 白色 作为 辅 色 ， 界 
面 整体 前 卫 且 凸显 科技 感 。 如 图 3-109 AA RIA, 使 用 紫色 作为 主 色调 ， 使 浏览 者 感 
到 轻快 活 关 、 充 满 激 情 ， 作 为 动感 游戏 网 站 的 主页 ， 这 种 设计 是 十 分 合适 的 。 
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色彩 的 选择 与 设计 师 想 感 有 直接 关系 ， 当 人 们 看 到 每 种 不 同 的 颜色 后 ， 总 是 

下 意识 地 寻找 生活 中 常见 的 同类 mps 再 通过 具象 的 物体 引申 出 抽象 的 情感 。 例 如 看 
到 红色 会 联想 到 太阳 和 火焰 使 人 们 感受 到 温暖 。 看 到 监 色 就 会 联想 到 天 空 和 海洋 ， 进 而 感 
受到 清新 。 

因为 每 个 人 的 生活 环境 、 家 许 痛 景 、 性 格 和 工作 领域 的 不 同 ， a 的 感受 
和 和 认 知 都 一 致 ， 但 仍然 可 以 找 出 大 多 数 人 对 于 色彩 认 知 的 相对 一 致 性 ， 并 朋 效 运用 这 些 心 理 
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感受 ， 使 网 页 所 要 表达 的 信息 和 情感 正确 传递 给 大 部 分 的 受众 。 
A 


TN 





E l AIE AZN, XE, AR MEKA., RE, RA 
JA HE, RAN a < 
AT., BT. HE, SB. RH A. RAE MAA 
BD. MAX. AR, BA., PE, a FaN e i 
EMA R, FEER, MRA, HA 


HA, RÍE 
EIER, AE, HER, MOLA, HA, Fe, ES 
E, ME, MA, K HES, SAS, AE, AIR, MRE 


KR FA, MUHE, ZA EE, AVUI 


LM, A, MA E, REE, DA, El, A 


AR. RUE, EX BB, ENE FM. A RE, EAU, FE, HE, LE. JUE 
云 末 、 棉 花 、 羊 毛 、 雪 、 纸 、 婚 纱 、 
牛奶 、 斑 马 线 

TB. PA, JO, MS APR AE AE, HA, BA, MAR 





E A A. A, KM, EX, MR 





如 图 3-110 所 示 为 网 页 界面 ， 使 用 绿色 作为 主 色调 ， 绿 色 很 容易 联想 到 树林 和 草原 ， 因 
此 采用 绿色 作为 环保 主题 的 网 页 界面 主 色 ， 非 常 符合 主题 。 如 图 3-111 所 示 为 网 页 界面 ， 使 
用 蓝 色 作为 主 色调 ， 蓝 色 容 易 联想 到 海洋 ， 显 而 易 见 ， 此 款 界面 是 水 族 馆 的 网 站 主页 ， 颜 色 
使 用 符合 主题 。 


» Lorem ipsum dolor sitamet 
consectetur adipiscing ell 





Fl 3-110 Fl 3-111 





产 喇 在 上 市 之 前 ， 必 然 已 经 确定 了 目标 群体 沁 围 ， 这 个 沁 围 可 以 大 致 通过 年 龄 、 性 别 、 
地 区 、 经 济 状况 和 受 教育 程度 等 因素 来 确定 。 在 确定 网 页 主题 色 时 ， 也 需要 对 不 同人 群 所 偏 
爱 的 颜色 做 一 些 了 解 ， 从 而 达到 预期 的 宣传 效果 。 
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不 同性 别 的 人 群 对 色彩 的 偏好 
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不 同 国家 对 色彩 的 偏好 

















a 红色 、 黄 色 、 蓝 色 黑色 、 白 色 、 灰 色 O O - 
等 艳丽 的 颜色 等 赚 淡 的 颜色 
RE. AE, Y 
法 国 黄色 、 墨 绿色 O 
红色 
红色 、 楼 深蓝 色 、 茶 
48, Be Re REG. HB, O O O 
等 温暖 明艳 的 颜色 黑色 
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色彩 偏好 
国家 地 区 












DH Pa Y 红色 、 绿 色 RE 
新 加 坡 红色 、 绿 色 黄色 
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泰国 RE., ME 
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384 根据 生命 周期 选择 网 页 配色 
色彩 也 是 商品 更 重要 的 外 部 特征 ， 产 品 的 销售 周期 是 指 从 该 产品 进入 市 场 ， 直 到 被 市 场 
淘汰 的 整个 过 程 。 A A 市 场 的 反应 和 企业 所 要 达到 的 营销 宣传 效 
新 品 上 市 时 期 
处 在 导入 期 的 产品 一 般 都 是 刚 上 市 ， 还 未 被 消费 者 所 熟知 。 为 了 加 强 宣 传 力度 ， 刺 激 靖 


ARA | BARA AI E, DIA ARRE EAST A, EA E 
清晰 而 直观 地 诠释 给 用 户 ， 如 图 3-112 所 示 。 

















3-112 


经 过 前 期 的 大 力 宣 传 ， 处 在 发 展期 的 产品 一 般 已 为 消费 者 所 熟知 ， 市 场 扣 有 率 也 开始 相 


e. Q7 eo 
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对 提高 ， 并 开始 有 竞争 者 出 现 。 为 了 能 够 在 同化 产品 中 脱颖而出 ， 这 一 阶段 的 网 页 应 该 选择 
比较 时 尚 和 鲜艳 的 颜色 作为 主 色 调 ， 如 图 3-113 所 示 。 


~ 01-234-5678 
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Ma 425 
发 展期 的 页 面 设计 颜色 可 以 更 加 丰富 多 彩 ， 版 式 也 可 以 更 加 随 





处 在 稳定 销售 时 期 的 产品 一 般 已 经 有 了 比较 稳定 的 市 场 占有 率 ， 消 费 者 对 产品 的 了 解 也 
经 很 深刻 ， 并 且 有 了 一 定 的 忠诚 感 。 而 此 时 市 场 也 已 经 接近 饱和 ， 企 业 通 前 无 法 再 通过 寻 
找 和 开发 新 市 场 来 提高 市 场 占 有 率 。 此 时 企业 宣传 的 重点 应 该 是 维持 现 有 顾客 对 品牌 的 信赖 
感 和 忠诚 感 ， 所 以 应 该 选用 一 些 比较 安静 、 沉 稳 的 颜色 作为 网 页 的 主 色 调 ， 如 图 3-114 
FR. 
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当 产 品 处 于 衰退 期 阶段 时 ， 消 费 者 对 产品 的 忠诚 度 和 新 鲜 感 部 会 有 所 降 供 ， 他 们 会 开始 
寻 技 其 他 的 新 产品 来 满足 需求 ， 最 终 导致 市 场 份额 不 断 下 降 。 这 一 阶段 的 主要 宣传 目标 就 是 
保持 消费 者 对 产品 的 新 鲜 感 ， 因 此 ， 需 要 对 产品 形象 进行 重新 改进 和 强化 ， 如 图 3-115 
Fi, 


-88 0 


网 站 页 面 UI 配 色 





g= 


a.y.s l ASA CAFE 
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本 章 主 要 讲解 了 网 页 配色 的 原则 和 方式 ， 具 体 的 配色 方案 疫 有 固定 的 规律 规则 ， 需 要 根 
据 界 面 要 表达 的 内 容 来 制定 ， 需 要 在 日 后 的 日 剃 生活 中 多 思考 、 多 观察 和 多 实践 ， 从 而 设计 
出 配色 合理 的 界面 。 

想 要 提高 对 色彩 的 敏感 度 ， 首 先 需 要 学 习 一 a 
来 的 ， 色 彩 的 分 类 与 区 别 ， 原 色 与 间 色 的 形成 规律 ， 以 及 色彩 市 给 感 效 应 ， 还 有 不 同 


的 配色 带 给 人 的 不 同感 受 ， 掌 握 这 些 基 础 常识 后 ， 有 意识 地 关注 身边 AER, AMAS, Y 
色彩 的 敏感 度 自然 就 提升 了 。 











为 了 认识 、 研 究 与 应 用 色彩 ， 人 们 将 干 变 万 化 的 色彩 按 
照 它们 各 自 的 特性 ， 按 一 定 的 规律 和 秩序 排列 ， 并 加 以 命 
ARA ER deis pu BEAN ERE: 5 按照 
三 属性 ， 有 秩序 地 进行 整理 、 分 类 ， 而 组 成 有 系统 的 色彩 体 
系 。 通 过 运用 三 维 空 vibe 来 同时 体现 色彩 的 明度 、 色 相 、 
纯度 之 间 的 关系 ， 就 形成 了 色 立 体 。 





UV 提示 
比较 通用 的 色 立 体 有 
体 ， 它 们 中 应 用 最 广泛 的 





IA 
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通过 一 个 章 世 的 学 习 ， 相 信用 户 对 网 页 配色 有 了 一 定 的 了 解 。 接 下 来 通过 一 个 实际 操 
作 ， 对 本 章 的 学 习 做 个 检验 。 


OOOO 





打开 一 个 网 页 ， 给 浏览 者 留 下 最 深 印 象 的 是 网 页 的 色彩 。 木 章 主要 介绍 一 些 基础 的 色彩 
知识 。 主 要 包括 光 与 色 的 三 原色 分 析 、 色 彩 的 构成 要 素 、 色 彩 的 视觉 心理 感受 ， 以 及 根据 网 
站 风格 和 内 容 选 择 配色 方案 等 。 希 望 通 过 本 章 的 学 习 ， 用 户 能 够 科学 合理 地 分 析 一 些 网 页 作 
品 ， 通 过 不 断 积累 经 验 ， 争 取 早日 设计 出 专业 的 网 站 页 面 





310.2 ERRE 


AE ERA AE, ERA AAA, HEAR At, A 
运用 阳光 、 水 波纹 和 水 花 的 效果 ， 使 整体 界面 清新 明快 。 
源 文件 地 址 . 源 文 件 \ 第 3 章 \ 制作 水 族 馆 网 站 主页 . PSD 
视频 地 址 : 视频 \ 第 3 章 \ 制作 水 族 馆 网 站 主页 . MP4 


A ARA 2. 使 用 “ 圆 角 和 矩形 工具 ”绘制 图 形 ， 并 添加 图 
FE o 


。 4 使用“ 模 排 文字 工具 ”输入 文字 ， 使 用 相同 
方法 制作 相似 内 容 。 








网 站 页 面 的 版 式 和 布局 有 一 些 约定 俗 成 的 标准 和 固定 的 
套路 。 根 据 网 站 的 不 同性 质 ， 为 每 一 幅 网 页 规划 合理 的 布局 
结构 ， 不 但 能 够 改变 整个 界面 的 视觉 效果 ， 还 能 够 加 深 浏 览 
者 对 网 站 的 第 一 印象 。 
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网 页 可 以 说 是 网 站 构成 的 基本 元 素 。 当 我 们 轻 扣 鼠标， 在 网 海中 邀 游 ， 一 幅 幅 精彩 的 网 
页 会 呈现 在 我 们 血 前 。 网 页 的 精彩 除了 受 色 彩 的 搭配 、 文 字 的 变化 和 图 片 的 处 理 等 元 素 的 影 
I, FE 常 重要 的 因素 ， 那 就 是 网 页 的 布局 。 






其 实 网 页 布局 结构 就 像 是 超市 里 物品 的 摆 放 方式 ， 在 超市 中 理 货 员 按 照 商 品 不 同 的 种 
类 、 价 位 ， 将 琳 环 满目 的 商品 进行 摆 放 ， 这 种 商品 的 摆 放 方式 有 助 于 消费 者 快速 便捷 地 选 购 
自己 想 要 的 商品 。 另 外 ， 这 种 整齐 一 致 的 商品 摆 放 方式 还 能 够 激发 消费 者 的 购买 欲望 。 

网 页 布局 也 是 同样 的 目的 ， 通 过 对 信息 进行 分 类 整理 ， 使 其 系统 化 和 结构 化 ， 以 全 浏览 
简捷 和 快速 地 了 人 解 信息 ， 如 图 4-1 所 示 。 








(Dranoeric" ET 
drap thase toys bere 








网 页 布局 必须 能 够 正确 传达 网 页 信息 ， 而 且 要 主 次 分 明 ， 网 页 布局 的 具体 内 容 和 操作 顺 
序 可 分 为 以 下 几 扎 。 

O 整理 消费 者 和 浏览 者 的 观点 和 意见 。 

O 仔细 分 析 浏 览 者 的 综合 特性 ， 划 分 浏览 者 类 别 并 明确 目标 消费 人 群 。 

Oo 确立 网 站 创建 的 目的 ， 并 规划 未 来 的 发 展 方向 。 

o 整理 网 站 的 内 容 并 使 其 系统 化 ， 定 义 网 站 的 内 容 结 构 ， 其 中 包括 层次 结构 、 超 链接 

结构 和 数据 库 结 构 。 

@ 收集 内 容 并 进行 分 类 整理 ， 检 验 导 航 系统 的 功能 性 。 

O 确定 适合 内 容 类 型 的 有 效 标记 体系 。 

Oo 不 同 的 页 面 放置 不 同 的 页 面 元 素 ， 且 构建 不 同 的 内 容 。 

综 上 所 述 ， 信 息 结构 是 以 消费 者 和 浏览 者 为 主体 的 ， 并 且 经 过 收集 、 整 理 和 加 工 后 ， 以 
简单 明了 的 方式 传递 给 浏览 者 。 因 此 ， 就 要 求 设 计 者 站 在 消费 者 的 立场 上 进行 设计 ， 充 分 体 
现 出 网 页 的 实用 性 ， 如 图 4-2 所 示 。 


© Q 0 





网 站 页 面 布局 与 版 式 设计 








4-2 


由 此 得 知 ， 实 用 性 是 以 规划 好 的 用 户 界 面 为 主 ， 且 用 户 界 面 的 策划 是 在 网 页 布局 结构 的 
基础 上 进行 的 ， 网 页 布局 结构 的 确立 则 以 信息 构 染 为 标准 。 


计算 机 端 常见 的 网 页 布局 方式 





在 设计 网 页 界面 时 ， 需 要 从 整体 上 把 握 好 各 种 要 素 的 布局 ， 只 有 充分 利用 、 有 效 分 割 有 
界 Jl 


的 网 页 布局 方式 主要 有 .:;“ 国 ”字形 、“T” 字 形 、 标 题 正文 型 、 左 右 分 割 型 、 上 下 分 割 型 、 
封面 型 、Flash 型 和 综合 型 ， 
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4.21 “H” FE 


“E” FEMENIL ARS MEE, ERE A A A AAA 
式 。 网 页 通常 会 在 页 面 最 上 和 面 放 置 Logo、 导 航 和 和 横幅 广告 条 。 接 下 来 就 是 网 站 的 主体 内 容 ， 
分 为 左 、 中 、 厂 三 大 块 。 页 面 最 下 向 是 网 站 的 一 些 基本 人 信息、 联系 方 式 和 版 权 声 明 等 。 这 种 
板式 的 优点 是 页 面 充 实 、 内 容 丰 富 和 信息 量 大 ,缺点 是 页 面 拥挤 并 且 灵 活 度 不 高 ， 如 图 4-4 
所 示 。 
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66 T” 字形 


“T” 字 形 布局 与 “ 国 ”字形 布局 十 分 相似 ， 只 是 在 形式 上 上 略 有 区 别 。 页 面 上 方 同 梓 是 
Logo、 导 航 和 广告 条 ， 页 面 中 间 部 分 左 侧 是 一 列 略 窄 的 菜单 或 链接 ， 石 侧 是 比较 宽 的 主体 部 
分 。 页 面 下 方 也 是 一 些 网 站 的 辅助 信息 和 版 权 信息 等 内 容 ， 如 图 4-5 所 示 。 


4.2.2 
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这 种 类 型 的 布局 方式 在 页 面 最 上 方 是 标题 或 一 些 类 仅 的 元 素 ， 中 间 是 正文 部 分 ， 最 下 面 是 一 
些 版 底 信息 。 我 们 弟 用 的 搜索 引 敬 类 网 站 和 注册 页 面 基 本 都 采用 这 种 布局 方式 ， 如 图 4-6 所 示 。 





(SG) 搜狗 搜索 
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4.2.4 左右 分 割 型 


左右 框架 型 结构 的 页 和 面 通关 
页 面 的 右 侧 则 是 正文 或 主体 部 分 
la, AAA TA, ME 


会 在 左 侧 放 置 一 列 文字 链接 ， 有 了 时 最 上 和 看 会 有 标题 或 Logo, 
， 大 部 分 的 论坛 都 采用 这 种 布局 方式 。 这 种 类 型 的 网 页 布 
4-7 所 未 


N 





到 4-7 


4.2.5 上 下 分 割 型 


上 下 框 染 型 结构 与 左右 框架 型 结构 类 似 ， 区 别 仅 限于 上 下 框架 型 页 面 的 导航 菜单 和 Lo- 
go 在 上 方 ， 正 文 和 主体 内 容 在 下 方 ， 如 图 4-8 所 示 。 


4... 
$000. 


上 neyao meaaive 


About SOHO South Salon 





图 4-8 


4.2.6 POP 型 


POP 减 自 广告 术语 ， 指 页 血 布 局 像 一 张 宣传 海报 ， 以 图 片 作为 页 徊 的 中 心 。 冲 用 于 时 尚 
类 网 站 ， 优 点 是 漂亮 吸引 人 ， 缺 点 是 速度 慢 ， 如 图 4-9 所 示 。 
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封面 型 布局 的 页 面 往 往 会 直接 使 用 一 些 极 具 设 计 感 的 图 像 或 动 国 作 为 网 页 背景 ， 然 后 添 
加 一 个 简单 的 “进入 ”按钮 就 是 全 部 内 容 了 。 这 种 布局 方式 十 分 开放 自由 ， 通 单 出 现在 一 
些 网 站 的 首页 ， 如 果 运 用 得 恰到好处 ， 会 给 用 户 市 来 十 分 项 心 悦 目 的 感觉 ， 如 图 4-10 所 示 。 











£| 
oko ; WATCH 7, HE 
mó T RARSSE 
PRE ORDER 


l 
hs GLOBAL WARFIGHIERS 
50 nedlo-hea po 


MEDALOF 


WARFIGHTER 


© f å» 4 
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人 以 实例 “制作 完整 竖 屏 网 页 


本 实例 是 一 款 封 面 型 网 站 首页 ， 以 黑色 为 主 色 调 ， 辅 色 用 到 了 监 色 和 白色， 界面 整体 以 
图 片 为 主 ， 通 过 文字 效果 突出 主题 ， 简 单 却 不 失忆 术 感 。 


E es mo osos coo emo man 








使 用 到 的 技术 


009 





图 层 样式 、 珑 形 工具 、 横 排 文 字 工具 


网 站 页 面 布局 与 版 式 设计 





+ 8318] 


gh 





ZE HE 
产 文 件 地 址 


《ci 执行 “文件 > 新 建 ” 
命令 ， 弹 出 “新 建文 档 ” 
对 话 框 ， 设置 如 图 4-11 
所 示 的 参数 。 单 击 “ 创 : 
建 ”按钮 ， 背 景 图 层 创建 
完成 ， 图 像 效 果 如 图 4-12 : 


PR 


(o) «an > + 
命令 ， 在 打开 的 字符 面板 A 
中 设置 参数 ， 在 画布 中 输 
入 文字 ， 如 图 4-13 所 示 。 
继续 在 打开 的 字符 面板 中 : 
设置 参数 ， 如 图 414; 


所 示 。 


(003 有 在 画布 中 输入 字号 为 ， 
19.89 的 文字 ， 如 图 4-15 : 
所 示 。 单 击 工具 箱 中 的 : 
“ 圆 角 和 矩 形 工具 ”按钮 ， 
在 画布 中 绘制 RGB (98 ; 
98 98) 的 圆 角 矩 形 , 将 
文字 颜色 调整 为 白色 , 如 : 


4-16 Hi, 


O E 
具 ” 完 成 相似 文字 的 输 : 
A, ME 4-17 所 示 。 使 
用 “矩形 工具 ”完成 绘 : 


制 ， 如 图 4-18 所 示 。 


大 


q 








O 最 近 使 用 项 








ctr 
FAT 


方正 启 体 简 体 


WA o 
alt 


4-11 4-12 


字符 


微软 雅 黑 





4-13 4-14 
首页 首页 
4-15 4-16 
首页 关于 我 们 品牌 中 心 。 ”招商 加 盟 论坛 中 心 。 ”管理 中 心 。 ”联系 我 们 


4-17 


4-18 
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Q05 有 打开 一 张 素材 图 像 ，: 
使 用 “移动 工具 ”将 图 : 
像 移入 到 设计 文档 中 ,如 
4-19 所 示 。 单 击 工具 : 
箱 中 的 “椭圆 工具 ” 按 : 
钮 ， 在 画布 中 绘制 填充 无 : 
描 边 为 7 像素 的 白色 圆 : 
形 ， 如 图 4-20 所 示 。 


人 06 单 击 工 其 箱 中 的 
“多 边 形 工具 ”按钮 , 在 | 
选项 栏 中 设置 边 数 为 3， 
在 画布 中 绘制 三 角形 , 如 : 


图 4-21 所 示 。 打 开 字 符 面 :上 


板 , 设置 各 项 参数 ,字符 : 


面板 如 图 4-22 所 示 。 
U 提示 











+ ATA am 


微软 雅 黑 Regular “微软 雅 黑 


TI 30 j=l - = [自动 ) v I 20 =n 


WA o 
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文字 除了 作为 语言 信息 载体 ， 同 时 又 是 具有 视觉 识别 特征 的 符号 。 通 过 图 形 化 的 艺 


之 外 的 信息 。 





(007 使 用 “ 模 排 文字 工 
具 ” 在 画布 中 分 别 输入 字 | 
号 为 30 点 和 20 点 的 文 
F, 208 423 所 示 。 使: 
用 “和 矩形 工具 ”在 画布 : 
中 绘制 宽 为 232 像素 ， 高 
为 1 像素 的 矩形 ， 效 果 如 
图 4-24 所 示 。 
([08 有 打开 一 张 素材 图 像 ， 
将 素材 图 像 移入 到 设计 文 : 
档 中 ， 图 像 效 果 如 图 4-25 | 
所 示 。 使 用 相同 方法 完成 | 
相似 内 容 操作 ， 将 多 张 素 | 
材 图 像 按照 一 定 的 规律 排 : 
列 整齐 ， 如 图 4-26 所 示 。 i 


— o 08 0 


案例 展示 案例 展示 
Case show Case show 
4-23 4-24 
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4-26 





0B 有 单 击 工具 箱 中 的 


“ 自 定形 状 工具 ”按钮 
在 选 项 栏 中 选择 “等 头 


2” 选 项 ， 如 图 427 所 
示 。 在 画布 中 绘制 RGB : 
(167, 167, 167) 的 形 





调 出 定 界 框 ， 将 形状 顺 时 | 


针 旋 转 90。。 
单 击 工具 箱 中 的 “直接 先 


RIR” RH, WEK 





和 Ctrl + V 复制 、 粘 贴 形 | 
状 ， 图 像 效果 如 图 428 | 


人 0 打开 一 张 素材 图 像 ， 
将 其 移入 到 设计 文档 中 ， 


为 其 添加 “投影 ”的 图 ;| 
层 样式 ， 如 图 429 所 示 。: | 
使 用 “矩形 工具 ”在 画布 | 
中 绘制 RGB (89, 89, 89) | 
MEE, EARE 如 不 透明 : 
EA 49%， 如 图 4-30 


所 示 。 
U 提示 





打开 “图 层 样 式 ” 对 话 框 ， 可 单 击 


也 可 以 双击 图 层 缩 略图 ， 


0 打开 字符 面板 ,分 
别 设置 “方正 启 体 简体 ” 
和 “ 汉 仪 瑞 意 宋 W” 字 
体 的 各 项 参数 ， 如 图 431 
所 示 。 使 用 “ 横 排 文 字 工 


具 ” 在 画布 中 输入 文字 ， 
如 图 4-32 所 示 。 


Mou | 

ri Y A AMS ves eo 

AA 

- mE Y >) > 
SELCE 

a 

ke thi 


bd 
¡Aa lava 
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4-29 


4-31 


“图 层 ” 面 板 底部 的 


4-30 


“添加 图 层 样式 ”按钮 ， 





4-32 


UN 网 站 UI 设计 第 2 版  _ ___ — 22 


(0 再 次 打开 “字符 ”i = 
面板 ， 设 置 “微软 雅 黑 ”: OTERO 


36.01 = 


各 项 参数 ， 如 图 4-33 F: 
示 。 在 画布 中 分 别 输入 字 : 
5436, 20, 16 的 文字 ， 
如 图 4-34 所 示 。 


AS 013 


TOTIS 





E 


MES Regular - Regular 公司 简介 


C34 “AAKI, 
R” J “EIR” dE: 
画布 中 绘制 RGB (126 | 
206、244) HARF 
矩形， 如 图 435 所 示 。 
继续 使 用 “ 横 排 文字 工 | 
具 ” 在 画布 中 输入 文字 。: 
使 用 相同 方法 完成 相似 内 | 


容 操作 ， 如 图 4-36 所 示 。 


Ger “EIR”: 
在 画布 中 绘制 填充 无 描 边 : 
为 3 像素 的 和 矩形， 使用: 
“ 横 排 文字 工具 ”在 画布 | 
中 输入 文字 ， 图 像 效 果 如 : 
图 437 所 示 。 将 连续 打 
开 几 张 素材 图 像 ， 将 其 移 : 
入 到 设计 文档 中 ， 如 


4-38 所 示 。 





十 七 加 盟 网 站 不 仅 从 首页 设计 ,页 面 设计 ， 页 面 内 元 素 设计 、 编 排 中 体现 ， 
也 是 影音 、 动 画 、 多 媒体 、 操 作 流程 与 应 用 规范 中 体现 。 对 于 品牌 形象 设计 ， 我 
们 将 以 总 体 效 果 、 整 体 性 进行 规范 设计 ， 并 力求 在 每 一 个 细节 精 丰 细作 ， 加 以 人 
性 化 的 创意 综合 体现 得 串 特 尔 品牌 的 形象 

加 以 人 性 化 的 创意 综合 体现 得 星 特 尔 品牌 的 形象 。 


加 以 人 性 化 的 创意 综合 体现 得 军 特 尔 品牌 的 形象 . 


加 以 人 性 化 的 创意 综合 体现 得 吓 特 尔 品牌 的 形象 
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公司 简介 





司 简介 
十 七 加 盟 网 站 不 仅 从 首页 设计 ， 页 面 设计 ， 页 面 内 元 素 设 计 、 编 排 中 体现 ， 十 ne g 
也 是 影音 、 动 画 、 多 媒体 、 操 作 流 程 与 应 用 规范 中 体现 。 对 于 品牌 形象 设计 ， 我 > y 
们 将 以 总 体 效果 、 整 体 性 进行 规范 设计 ， 并 力求 在 每 一 个 细节 精 周 细作， 加 以 人 大 | y K 
性 化 的 创意 综合 体现 得 器 特 尔 品 牌 的 形象 2 
| 加 以 人 性 化 的 创意 综合 体现 得 黑 特 尔 吕 了 的 形象 -—- 
| 加 以 人 性 化 的 创意 综合 体现 得 蛙 特 尔 员 算 的 形象 
入 我们 
| 加 以 人 性 化 的 创意 综合 体现 得 是 特 尔 品牌 的 形 铺 = 
TRA 
4-35 4-36 
加 六 我 们 
jon us 
开刀 区 市场 TARARE 


战略 合作 伙伴 


as lz ewe 四 CN 会 着 党 
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《15 有 继续 打开 一 张 素材 | 
图 像 ， 使 用 “移动 工具 ”: 
将 移入 到 设计 文档 中 ， 图 : 
像 效果 如 图 4-39 所 示 。 | 
使 用 “和 矩形 工具 ”在 画 : 


布 中 绘制 RGB (51. 51, 


51) 的 矩形 ， 并 修改 图 层 
不 透明 度 为 81%， 如 图 


4-40 所 示 。 


(16 有 单 击 工具 箱 中 的 
“ 横 排 文字 工具 ”， 设 置 : 
如 图 4- 41 所 示 的 参数 ，: 
在 画布 中 输入 如 图 4- 42 | 


所 示 的 文字 。 


017 有 打开 一 张 二 维 码 素 : 
材 图 像 ， 移 入 到 设计 文档 : 
中 ， 如 图 4-43 所 示 。 使 
用 “ 横 排 文字 工具 ”在 : 
二 维 码 图 像 下 面 输入 相应 | 


文字 ， 如 图 4-44 所 示 。 


(18 有 再 次 打开 一 张 电话 : 
的 素材 图 像 ， 将 其 移入 到 : 
设计 文档 中 ， 如 图 4- 45 
所 示 。 继 续 使 用 “ 横 排 文 
字 工具 ”在 画布 中 输入 电 | 


话 号 码 ， 如 图 4-46 所 示 。 





GOG MRE SRH 





asa w ew 0 h CN 和 A 首 党 








4-39 4-40 


字符 
方正 启 体 简 体 


TI 120 点 
a IA = 
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H. 七 微 信 公 众 号 





4-43 4-44 


(《、) 咨 询 热线 : 400-1234678 
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e 101 e 一 
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行业 新 闻 


打开 字符 面板 ， 
加 关于 我 们 
置 如 4- 47 F T ZJN 的 参 X o i 18 点 “| 该 2402 点 |、 13 点 Alaaa ly 从 司 简介 
在 画布 中 输入 2 种 字号 大 OS Ca O 
7 h ES pa 字 ? E 效 果 如 E 100% 100% 7 100% 100% =s 
E 45 05 ES AF o E 公司 新 闻 
E] 4-48 所 示 。 I T TI o am mo aP o 





图 4-47 图 4-48 
人 20] 使 用 相同 方法 完成 / 
相似 文字 内 容 制 作 ， 如 攻 : ` 
| am w cv O CNA ÚS 党 


4-49 所 示 。 完 成 输入 后 ， 
网 页 整体 效果 如 图 4.50 | 
所 示 。 





4-49 4-50 


Y 提示 
本 实例 由 于 图 层 过 多 ， 在 设计 时 为 防止 图 层 错乱 ， 也 为 方便 后 期 人 员 人 修改， 将 相关 





图 层 进 行 编组 处 理 。 











Flash 型 布局 方式 与 封面 型 类 似 ， 只 是 采用 了 目前 流行 的 Flash 动 男 。 相 较 于 图 像 来 说 ， 
Flash 具有 更 强 的 交互 性 ， 不 仅 可 以 表现 更 多 的 信息 和 内 容 ， 还 能 更 好 地 泻 染 页 面 的 活跃 气 
氛 。 游 戏 类 网 站 和 设计 类 网 站 喜欢 采用 这 种 布局 方式 作为 首页 ， 如 图 4-51 所 示 。 
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网 站 页 面 布局 与 版 式 设计 








(a Jeminn 


现在 移动 端 多 采用 响应 式 布局 。 响 应 式 布局 就 是 一 个 网 站 能 够 兼容 多 个 终端 ， 而 不 是 为 
每 个 终端 做 一 个 特定 的 版 本 。 这 个 概念 是 为 解决 移动 互联 网 浏览 而 诞生 的 。 响 应 式 布局 可 以 
为 不 同 终端 的 用 户 提供 更 加 舒适 的 界面 和 更 好 的 用 户 体验 ， 而 且 随 着 目前 大 屏幕 移动 设备 的 
普及 ， 用 大 势 所 趋 来 形容 也 不 为 过 。 随 着 越 来 越 多 的 设计 师 采用 这 个 技术 ， 我 们 不 仅 看 到 很 
多 的 创新 ， 还 看 到 了 一 些 成 形 的 模式 ， 如 图 4-52 所 示 。 





4. 3.1 布局 的 类 型 


响应 式 网 页 设计 作为 目前 主流 的 一 种 WEB 设计 形式 ， 主 要 特色 是 页 面 布 局 能 根据 不 同 
设备 (PRI, BARA, GEFI) 让 内 容 适 应 性 地 展示 ， 从 而 让 用 户 在 不 同 设 
备 上 都 能 够 友好 地 浏览 网 页 内 容 。 响 应 式 有 所 像 自 适 应 的 布局 ， 但 还 有 一 挟 区 别 |。 

在 谈 关 于 响应 式 网 页 设计 布局 前 ， 先 梳理 下 网 页 设计 中 整体 页 面 排版 布局 ， 常 见 的 主要 
有 如 图 4-53 所 示 的 几 种 类 型 。 
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采用 不 同 的 方法 可 以 实现 不 同 的 布局 设计 。 这 里 基于 页 和 面 的 实现 单位 而 言 ， 分 为 四 种 类 
型 : 固定 布局 、 可 切换 的 固定 布局 、 弹 性 布局 和 混合 布局 。 
o 固定 布局 : 以 像素 作为 页 和 面 的 基本 单位 ,不管 设 备 屏 幕 及 浏览 器 宽度 ， 只 设计 一 套 
尺寸 ， 如 图 4-54 所 示 。 
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o 可 切换 的 固定 布局 : 同样 以 像素 作为 页 面 单位 ， 参 考 主流 设备 尺寸 ， 设 计 几 套 不 同 
宽度 的 布局 。 通 过 设备 的 屏幕 尺寸 或 浏览 颖 宽度 ， 选 择 最 合适 的 那 套 宽 度 布 局 ， 如 
图 4-55 所 示 。 


可 切换 的 固定 布局 
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o 弹性 布局 : 以 百分比 作为 页 面 的 基本 单位 ， 可 以 适应 一 定 沁 围 内 所 有 尺寸 的 设备 屏 
幕 及 浏览 颖 宽度， 并 能 完美 地 利用 有 效 空间 展现 最 佳 效 果 ， 如 图 4-56 所 示 。 


区 间 宽 度 - KARE- 
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o Zeta: Ali, STAES ERA AA RTAS E AAA as e 


-10 人 o 





EJES 网 站 页 面 布局 与 版 式 设计 


度 ， 并 能 完美 地 利用 有 效 空间 展现 最 佳 效 果 ; 只 是 混合 像素 和 百分比 两 种 单位 作为 
页 面 单位 ， 如 图 4-57 所 示 。 


区 间 宽 度 
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可 切换 的 固定 布局 、 弹 性 布局 和 混合 布局 都 是 目前 可 被 采用 的 响应 式 布 局 方式 。 其 中 可 
切换 的 固定 布局 的 实现 成 本 最 低 ， 但 拓展 性 比较 差 ， 而 弹性 布局 与 混合 布局 效果 具有 较 强 的 
响应 性 ， 都 是 比较 理想 的 响应 式 布局 实现 方式 。 只 是 对 于 不 同类 型 的 页 面 排版 布局 来 说 ， 实 
现 响 应 式 设 计 需 要 采用 不 同 的 实现 方式 。 通 栏 、 等 分 结构 适合 采用 弹性 布局 方式 ， 而 对 于 非 
等 分 的 多 栏 结 构 ， 往 往 需要 采用 混合 布局 的 实现 方式 ， 如 图 4-58 所 示 。 


可 以 采用 弹性 布局 


以 来 用 混合 布局 


兰 2 村 的 非 等 分 排版 
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4.3.3 MAR 


对 页 面 进 行 响 应 式 的 设计 实现 ， 需 要 对 相同 内 容 进 行 不 同 宽 度 的 布局 设计 ， e 
可 以 实现 : REO (AREA AI NT); 移动 优先 (MB EAT). 无 
于 哪 种 模式 的 设计 ， 要 兼容 所 有 设备 ， ee 
(发 生 布局 改变 的 临界 点 称 为 断 点 ) 。 

通过 钓 取 设备 的 屏幕 宽度 ， 来 改变 网 页 的 布局 ， 过 程 称 为 布局 响应 屏幕 。 单 见 的 主 
要 有 如 下 几 种 方式 。 

布局 不 变 ， 即 页 面 中 整体 模块 布局 不 发 生变 化 ， 主 要 有 : 

O 模块 中 内 容 : 挤 压 - 拉 什 ， 如 图 4-59 所 示 。 

O 模块 中 内 容 : 换行 - 平 铺 ， 如 图 4-60 所 示 。 





SO 网 站 UI 设计 第 2 版 


布局 不 变 
模块 中 内 容 挤 压 一 拉 促 


一 一 一 一 一 一 模块 内 容 一 一 一 一 一 一 一 一 一 一 ”> 拉 伸 
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布局 不 变 
模块 中 内 容 换行 一 平 销 


一 一 一 一 一 一 模块 内 容 一 一 一 一 一 一 一 一 一 一 ”> FH 





Pack 


o 


IE 过 





O 模块 中 内 容 ， 删 减 - 增 加 ， 如 图 4-61 所 示 。 


布局 不 变 
模块 中 内 容 删 减 一 增 加 
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人 布局 改变 ， 即 页 和 面 中 的 整体 模块 布局 发 生变 化 ， 主 要 有 : 


— 106 e 








COS Misma SIR 


O 模块 位 置 变 换 ， 如 图 4-62 所 示 。 


布局 改变 
模块 位 置 变换 


模块 位 置 变换 ”一 人 一 





Fringe Development 


GLOVE WEB & Brnge WHITE-GLOVE WEB & MOBILE 
MOBILE DEVELOPMENT 
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O 模块 展示 方式 改变 ， 隐藏 -展开 ， 如 图 4-63 所 示 。 


布局 改变 
模块 展示 方式 改变 





O 使 块 数量 改变 : 删 减 - 增加 ， 如 图 4-64 所 示 。 


布局 改变 
模块 数量 改变 





Greenbelt Festival 


soso 
eenpar 0050 9 00O O 
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UY 提示 
很 多 时 候 ， 单 一 方式 的 布局 响应 无 法 满足 理想 效果 ， 需 要 结合 多 种 组 合 方式 ， 但 原 
则 上 尽 可 能 保持 简单 轻巧 ， 而 且 同 一 断 点 内 (发 生 布局 改变 的 临界 点 称 为 断 点 ) 保持 统 





一 还 辑 。 否 则 页 面 实现 得 太 过 复杂 ， 也 会 影响 整体 体验 和 页 面 性 能 。 


4.3.4 了 呵 应 陈 布 局 优 缺 点 


虽然 响应 式 布局 方式 现在 占据 主流 市 场 ， 但 就 自身 的 限制 性 而 言 ， 它 同样 具有 优 缺 点 。 
优点 : 

@ 而 对 不 同 分 辩 率 设备 灵活 性 强 。 

O 能 够 快捷 解决 多 设备 显示 适应 问题 。 

缺点 : 

O 兼容 各 种 设备 工作 量 大 ， 效 率 低下 。 

@ 代码 系 歼 ， 会 出 现 隐藏 无 用 的 元 素 ， 加 载 时 间 加 长 。 

O 这 是 一 种 折 中 性 质 的 设计 解决 方案 ， 多 方面 因素 影响 而 达 不 到 最 佳 效 果 。 

O 一 定 程度 上 改变 了 网 站 原 有 的 布局 结构 ， 会 出 现 用 户 混淆 的 情况 。 


(4 narra 


SS RA EE DAA 
Ar REL TR, ALTAR, FAB ALIENTAN A, UE 4-65 所 示 。 只 有 
在 有 限 空 间 内 合理 安排 网 员 元 素 ， 才 能 制作 出 更 好 的 页 面 。 
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4.4.1 网 页 布局 设计 


网 站 页 面 的 布局 并 不 是 将 页 面 中 的 元 素 随 意 排 布 。 网 页 布局 设计 是 一 个 网 站 展现 其 美观 
性 和 实用 性 的 重要 方法 。 网 页 中 的 文字 、 图 像 或 其 他 一 些 网 页 的 构成 元 素 是 售 协 调 ， 决 定 了 
网 页 界面 给 浏览 者 的 视觉 感受 和 页 面 的 实用 性 。 因 此 ， 如 何 使 页 面 看 起 来 美观 、 大 方 和 实 
用 ， 是 网 页 设计 师 在 进行 创作 时 ， 首 先 要 考虑 的 问题 。 

网 页 界面 布局 的 方式 决定 了 网 页 界面 给 浏览 者 留 下 的 第 一 印象 ， 因 此 ， 在 制作 时 需要 和 仔 
细 观 察 布局 方式 和 多 征求 他 人 意见 ， 将 丰富 多 彩 的 元 素 ， 有 机 地 融合 在 页 面 中 ， 以 最 好 的 方 
式 展示 给 浏览 者 ， 如 图 4-66 所 示 。 


— 108 0 


网 站 页 面 布局 与 版 式 设计 
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4.4.2 网 页 布局 特征 


在 网 页 设计 中 ， 需 要 考虑 到 网 页 界面 的 实用 性 以 及 是 否 能 够 方便、 准确 和 快捷 地 传达 信 
息 。 此 外 ， 还 需要 考虑 网 页 界面 是 否 具 有 视觉 上 的 美感 ， 以 及 结构 形态 的 设计 是 舍 合 理 等 因 
素 ， 不 但 要 突出 各 个 元 素 的 特 扎 ， 还 要 兼顾 整体 视 沈 效果 。 需 要 充分 考虑 网 站 的 目的 和 性 
质 ， 才 能 创建 出 一 个 好 的 网 页 布局 。 

网 页 布局 的 难点 在 于 每 个 使 用 者 的 使 用 环境 不 同 ， 页 面 变数 过 大 。 因 此 ， 能 否 有 效 地 处 
理 这 些 问题 ， 在 网 页 设计 中 显得 尤为 重要 。 在 常用 的 1024 x768 (RZ), 1660 x900 (R 
Z) 以 及 时 高 像素 下 ， 能 舍 完 美展 示 网 页 ， 如 图 4-67 Fra, 






















PIPE SHEE 100i 早 买 早 便宜 SHES 100 saa 
EZ E 主页 | 浏览 器 ARTE EFEKT. AAA 登录 ~ MEN “标准 版 ~ 抗 鞭 。 2345 底 下 产品 FREE AAE PPNM. SERM T: RANNA 登录 - wan 标准 斯 ~ 搞 肤 ” 2345 次 下 产品 
$ B > SE ; 了 pe RaT a 
A 北京 SAR 明天 阴 5% 109248 E Rif: RBA 7 
e OS i a 这 eu BO CO 150 E 。 邮箱 : 3163, cor xi 


新 闻 音乐 Mí BR 贴吧 地 图 ~ 
= AREFE 
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综合 搜索 幅 网 页 NENA. ABE 
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2345 小 游戏 15% 六 间 房 二 接 Sar 工商 银行 ~ NES so ZLA arsa 
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超市 1 元 种 杀 MUA HESE ES AMS? Us RRA 
购物 。 贪 观 1 红包” 交易 二 手 车 TRH MUME BRATE RESE 
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1024x768 1600x900 


4-67 


UY 提示 
分 辨 率 的 不 同 ， 同 一 网 站 页 面 的 显示 也 不 一 样 ， 分 辨 率 为 1024 x 768 的 网 页 看 起 来 
方正 ， 而 1440 x900 的 网 页 是 宽屏 显示 ， 虽 然 分 辨认 有 变化 ， 但 需要 展现 的 内 容 并 没有 





太 多 变化 ， 这 就 是 在 设计 时 考虑 到 了 用 户 使 用 环境 的 多 样 化 。 


4.4.3 网 页 布局 原则 


网 页 布局 原则 包 后 协调、 一致、 流动、 均衡 和 强调 等 。 
@ 协调 : 是 指 将 网 站 中 的 每 个 构成 元 素 有 效 地 结合 或 联系 在 一 起 ， 给 浏览 者 一 个 美观 
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实用 的 网 页 界面 。 
O 一 致 : 是 指 网 站 整个 页 面 的 构成 部 分 要 保持 统一 的 风格 ,使 其 在 视 党 效果 上 能 够 整 
le 


@@ 流动 : 是 指 网 页 布局 的 设计 能 够 让 浏览 者 赁 着 感觉 走 ， 并 且 页 面 能 够 根据 浏览 者 的 
兴趣 ， 提 供给 浏览 者 需要 的 内 容 。 

@ 均衡 .是 指 将 页 面 中 的 每 个 要 素 有 序 地 进行 排列 ， 并 且 保 证 页 和 面 稳定 
当 加 强 页 面 的 实用 性 。 

O 强调 是 指 把 页 面 中 需要 突出 的 内 容 在 不 影响 整体 设计 的 前 担 下， 色彩 的 搭配 或 留 
和 白 技巧 最 大 限度 地 展示 出 来 ， 如 图 4-68 所 示 。 











AAA A 
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此 外 在 进行 网 页 设计 时 ， 还 需要 考虑 到 网 页 的 醒目 性 、 创 造 性 、 造 型 性 、 可 读 性 和 明快 
PESAR. 

O 醒目 性 : EARRA RAAJAN, H5 SRNA A AUR 
P 有 。 
创造 性 : 是 指 让 网 页 界面 更 富有 创造 力 和 独特 的 个 性 特征 。 

O 造型 性 : 是 指使 网 页 界面 在 整体 外 观 上 保持 平衡 和 稳定 。 

O 

© 明快 性 : 是 指 网 页 界面 能 够 准确 快捷 地 传达 页 面 中 的 信息 。 如 图 4-69 所 示 为 两 款 布 
DA, E 


Web hosting P 
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网 站 页 面 布局 与 版 式 设计 


-实例 “制作 蛋糕 店主 页 一 一 顶部 


本 实例 是 一 款 蛋 糕 店 的 网 站 首页 ， 以 标 色 为 主 色 调 ， 辅 色 用 到 了 标 红色 和 黑色 ， 界 面 整 
体 以 图 卢 为 主 ， 通 过 阴影 效果 突出 主题 ， 整 体 布局 清晰 合理 ， 设 计 感 十 足 。 








图 层 样式 、 图 形 工具 、 横 排 文字 工具 


《1 执行 “文件 > me” (NS 

一 ' BEN): 未 标题 - 

命令 , 设置 如 图 4-70 所 : IIS 

I 的 参 o HT E 6 Fz 帘 度 [W): 1920 ex 

高 度 (H): 2070 ES 

1 ?? = l ES + T A 48 En | 分 诽 率 [RJ: 72 EJEA 
3 、 i 颜色 模式 : RGB 颜色 ~ 8 位 

的 “渐变 工具 ”按钮 ,| 

为 画布 填充 径 向 渐变 ， 图 IS 


MEA: sRGB IEC61966-2.1 


IRA RUN 区 | 4-71 Fi, | BERE: AERE 





背景 内 容 :| 白色 


ko2] 单 击 工具 箱 中 的 : 
SERIA” JE, AB 
FRAILE, HA 
效果 如 图 472 所 示 。 单 击 : 
工具 箱 中 的 “ 圆 角 矩形 工 
具 ” 按 钮 ， 设 置 圆 角 的 半 : 
径 为 1 像素 ， 在 画布 中 绘 
制 任意 颜色 的 圆 角 矩 形 ， 








o 11] o— 



































RA 


具 ”， 在 画布 中 输入 如 图 


/ nn Lar ~ == 
4-715 所 示 的 文字 。 





其 他 文字 的 输入 ， 如 : 
图 4-76 所 示 。 将 相关 / 
层 编 组 ,图 层面 板 如 


E 4-77 所 示 。 


(5) 羊 击 工具 箱 中 的 
“ 矩 形 工具 ”按钮 ， 在 画 
布 中 绘制 矩形 ， 图 像 效 果 : 
如 图 4-78 所 示 。 使 用 相 : 
同方 法 绘制 另 一 个 和 矩形， 


图 像 效 果 如 图 4-79 所 示 。 


(006 有 单 击 工具 箱 中 的 
“添加 错 点 工具 ”按钮 ,为 
矩形 添加 锚 点 ， 如 图 4- 80 ; 
所 示 。 单 击 工具 箱 中 的 
“直接 选择 ”按钮 ， 移 动 | 
刚 添加 的 锚 点 ， 效 果 如 图 


4-81 所 示 。 


单 击 “ 图 层 ” 面 板 | 
底部 的 “添加 图 层 样式 ”| 
按钮 ， 在 弹出 的 “图 层 样 
式 ” 对 话 框 中 选择 “ 颜 : 
EEI” Am, 设置 如 
图 4.74 所 示 的 参数 。 单 击 : 
工具 箱 中 的 “ 横 排 文字 工 


EM 
AN 
ERE 
EE 
投影 














新 建 样式 (W)… 


取消 


预览 (V) 











服务 雪线 400-1234-567 


O ` 
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人 一 = 
TL Tr TT 


美国 英语 





rro TS a A i 
“| NAE: 100% ~ 


DÁ HA: 100% ~ 


e 组 1 


T 400-1234567 


T 服务 热线 
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KO omai 





57 1” 
冬 4-79 
ESI TT 











所 示 。 


提示 


i 






[07 单 击 工具 箱 中 的 : 
“转换 点 ”按钮 ， 单 击 被 | 
移动 的 锚 点 ， 图 像 效果 如 | 
图 4-82 所 示 。 使 用 相同 : 
方法 完成 相似 内 容 的 制 : 
1E, 图像 效果 如 图 4- 83 





E] 4-82 


网 站 页 面 布局 与 版 式 设计 





使 用 工具 箱 中 的 “转换 点 ”工具 ， 可 以 实现 选中 锚 点 圆滑 拐角 和 尖 角 的 变换 。 








果 如 图 4-85 所 示 。 
| 





“ 横 排 文字 工具 "， 设 置 | 
如 图 4- 86 所 示 的 参数 ， 
在 画布 中 输入 如 图 4- 87 | 
所 示 的 文字 。 








ar 


图 像 效 果 如 图 4-89 所 示 。 


fos) “57227 E: 
层 ， 移 动 到 “和 矩形 3 PE 
3” 图 层 上 方 ， 图 像 效 果 : 
如 图 4- 84 所 示 。 执行 : 
“作坊 于” HT 
开 素 材 图 像 “素材 > 第 4 
章 > 44301. png” FHA. 
到 画布 合适 位 置 ， 图 像 效 ， 


了 单 击 工具 箱 中 的 


单 击 工具 箱 中 的 ， 
“多 边 形 工具 ”按钮 , 设 
置 如 图 4-88 所 示 的 参数 ，: 
在 画布 中 绘制 多 边 形 。 选 
中 “多 边 形 1” 图 层 , 使 
央 捷 键 Cal + 本 复制 图 层 : 
并 移动 图 像 到 相应 位 置 ， | 


E] 4-84 [Š] 4-85 


微软 雅 黑 Reg... wo Regular 





图 4-89 
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人 1 单 击 工具 箱 中 的 

i * 新 品 上 市 * * 联系 我 们 * Rs A n e 
SERIA” Èt, RE oo 
如 图 4-90 所 示 的 人 参数， 
在 画布 中 绘制 矩形 ， 并 填 : 
充 图 层 “ 不 透明 度 ” 为 : 
85% 。 使 用 相同 方法 绘制 : 


AR A RCE (126. 82. 67) 
相似 形 状 ， 如 4-91 | KE 180 115. 97) 





所 示 。 ' E E => 
到 4-90 到 4-91 


单 $ La niel — ES : MTS Reg... ~ Regular 
“ 横 排 文 字 工具 ”， 设 置 : T 

如 图 492 所 示 的 参数 ， 
在 画布 中 输入 如 图 4-93 | 
所 示 的 文字 。 | 








* 新 品 上 市 + 联系 我 们 + 


Trn E 
RGB(224. 176. 159) 











美国 英语 - da PE 
| 到 4-92 到 4-93 

DIET E 

重 命名 为 “导航 条 ”, 图 | p Da E 


层面 板 如 图 4.94 所 示 。 
单 击 工具 箱 中 的 “ 自 定义 : 
形状 工具 ”按钮 ， 在 画布 | 
中 绘制 RGB (244、223 | 
191) 形状 如 图 495 | 
所 示 。 





Z] 4-95 








O 
相似 内 容 的 制作 ， 图 像 效 : n a 
果 如 图 4-96 iR. AE 
工具 箱 中 的 “椭圆 工具 ”: 
按钮 ， 在 画布 中 会 制 RGB | 
(171、114、91) EJ, : 
图 像 效 果 如 图 4-97 所 示 。 





Z| 4-96 到 4-97 











15 有 单 击 图 层面 板 底部 | - 
的 “添加 图 层 样 式 ” 按 a 
HH, 在 弹出 的 “图 层 样 
式 ”对 话 框 中 选择 “内 阴 ， 
影 ” 选 项 ， 设 置 如 图 4-98 : 
所 示 的 参数 。 使 用 相同 方 
法 完成 相似 内 容 的 制作 ，: 


图 像 效 果 如 图 4-99 所 示 。 


人 6 将 相关 图 层 编组 ， 
重 命名 为 “ 翻 页 "， 图 层 : 
面板 如 图 4-100 所 示 。 单 
击 工具 箱 中 的 “ 横 排 文 字 | 
工具 ”， 在 画布 中 输入 如 : 


4-101 所 示 的 文字 。 


ki7 使 用 相同 方法 完成 
相似 内 容 的 制作 ， 图 像 效 : 
果 如 图 4-102 所 示 。 单 击 : 
工具 箱 中 的 “ 自 定义 形状 : 
工具 ”按钮 ， 在 画布 中 绘 : 
制 RGB (227、203、 
179) 形状 如 图 4-103 : 


所 示 。 


《Ga 使 用 相同 方法 完成 
相似 内 容 的 制作 ， 图 像 效 | 
果 如 图 4-104 所 示 。 执 行 
“文件 > 打开” 命令, 打 | 
开 素材 图 像 “ 素 材 > 第 4 
章 > 44302. png” JEAN | 
到 画布 合适 位 置 ， 图 像 效 : 





果 如 图 4-105 所 示 。 
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“| 国 四 工艺品 向 
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DO > 填充 : 100% ~ 

RT re 

TT 5 点 


HE 14801 4 fx ~ Yan 


B 0% 
İT 100% 
TT TET TIT 


美国 英语 val 无 





[Š] 4-101 





] 4-102 ] 4-103 


(124 甜 刘 品味 一 
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AN A E 


M e 
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[Š] 4-104 [Š] 4-105 
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(9 有 单 击 “ 图 层 ” 面 板 
底部 的 “添加 图 层 样式 ” 
按钮 ， 在 弹出 的 “图 层 样 
式 ”对 话 框 中 选择 “投影 ” 
选项 ,设置 如 图 4-106 所 | 村 于 时 时 昨 昨 人 全 
示 的 参数 。 图 像 效果 如 图 : E 

4-107 所 示 。 








4-100 4-107 


CO 将 相关 图 层 编组 ， 

重 命名 为 “图 片 "， 图 层 TRE 
面板 如 图 4-108 MR : 了 

整 图 层 组 的 顺序 ， 并 将 相 : 
应 图 层 组 进行 编组 ， 重 命 
名 为 “顶部 ”， 图 层面 板 : 
如 图 4-109 所 示 。 | 





4-109 


Y 提示 
AMAR TIRAR AO ERORE, HARIAN, RA TÍA AGE E 
像 和 文字 的 下 方 ， 使 其 不 影响 主要 内 容 。 





AREA 制作 蛋糕 店主 页 一 一 主体 


j 
j 

} 

j Y 


AFERRA AREA, FAENAS, ELAINE RARE, HE 
款 界 面 的 排版 简洁 明了， 元 素 多 而 不 乱 ， 整 体 布局 清晰 合理 ， 设 计 感 十 足 。 





== 
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ARA, BETA, RAXFLA, HUSA 





第 4 章 \ MESA ELA EA. mp4 





《CD 继续 上 一 个 实例 ， 
ETAM PH “AEX 
形状 工具 ”按钮 ， 在 画布 : 
中 绘制 RGB (227, 203, 
179) 形状 ， 如 图 4-110 : 
所 示 。 使 用 相同 方法 完成 
相似 内 容 的 制作 如 | 


图 4-111 所 示 。 


(02) 将 相关 图 层 编 组 ， 
重 命名 为 “展示 框 "， 图 ， 
层面 板 如 图 4-112 所 示 。 | 
单 击 图 层面 板 底部 的 “ 添 : 
加 图 层 样式 ”按钮 ， 在 弹 : 
出 的 “图 层 样 式 ” 对 话 | 
框 中 选择 “颜色 蕉 加 ”; 
选项 ， 设 置 如 图 4-113 所 


示 的 参数 。 


(003 继续 选择 “投影 ” 
选项 ,设置 如 图 4-114 所 : 
示 的 参数 。 执 行 “文件 > | 
打开 ”命令 ,打开 素材 图 : 
像 “ 素 材 > 第 4 章 > i 
44303 ~ 44307. png” 并 拖 | 
入 到 画布 合适 位 置 ， 图 像 


效果 如 图 4-115 所 示 。 


CJ 单 击 工具 箱 中 的 | 
“ 横 排 文字 工具 ”， 在 画 : 
布 中 输入 如 图 4-116 所 示 : 
的 文字 。 使 用 相同 方法 完 | 
成 其 他 文字 的 输入 ， 如 


4-117 所 示 。 





源 文件 \ 第 4 章 \ 制作 蛋糕 店主 页 . psd 





Fl 4-110 Fl 4-111 





- 不 透明 度 : 100% ~ 


bi A 填充 : 100% 


内 阴影 

PEX 

FE 
颜色 亚 加 





4-113 








4-115 


杯子 蛋糕 





4-116 4-117 
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《c5] 将 相关 图 层 编组 , B a 
重 命名 为 “展示 区 ”， 图 PO 
层面 板 如 图 4-118 ATAR, | 
ETAP PA “ERT 
具 ” 按 钮 ， 在 画布 中 绘制 
和 矩形， 图 像 效 果 如 图 4-119 | 
所 示 。 














odo E] 4-119 
(05) 使 用 相同 方法 完成 — = = 
相似 内 容 的 制作 ， 图 像 效 : 
果 如 图 4-120 所 示 。 将: 
“EKO” RERE “JE ; 
形 6 拷贝 4” 图 层 上 方 , : 
图 像 效果 如 图 4-121 所 示 。: 


W 提示 
MER ESA AAA, TAE “BERK” PRADA, MINA 
需要 调整 的 图 层 ， 执 行 “ 图 层 > 排 列 ” 命 令 ， 在 弹出 的 子 菜单 中 执行 相应 命令 ， 对 图 层 














4-121 








X 








4-120 


X 

















的 顺序 进行 调整 。 


(7) mx uE RA, 

apg» ser”, 12 AOS 
面板 如 图 4-122 所 示 。 单 | 向 gg 

击 图 层面 板 底部 的 “添加 G 
图 层 样式 ”按钮 ， 在 弹出 ， 
的 “图 层 样式 ”对 话 框 : 
中 选择 “投影 ”选项 ， 


设置 如 图 4-123 所 示 的 | 




















参数 El 4-122 到 4-123 
Œn m 一 
“ 横 排 文字 工具 ”， 在 画 SCakes sii Cakes 





布 中 输入 如 图 4-124 所 示 swestCakes 
的 文字 。 使 用 相同 方法 完 : 
成 其 他 文字 的 输入 ,如 | 
图 4-125 所 示 。 : 











R| 4-124 Z| 4-125 








《Cs 单 击 工具 箱 中 的 
“ 自 定义 形状 工具 ” 按 
钮 ， 在 画布 中 绘制 RGB i 
(92, 33, 25) 的 图 形 ， 
图 像 效果 如 图 4-126 所 : 
示 。 单 击 图 层面 板 底部 的 


“添加 图 层 样式 ”按钮 ， 


在 弹出 的 “图 层 样式 ”对 


话 框 中 选择 “投影 ”选项 ， 


4-129 所 未 。 


执行 “文件 > 打开 ”| 
命令 ， 打 开 素 材 图 像 “ 素 


材 > 第 4 章 >44308. png’ 
F FE A FI 国 布 合适 TÉ, 


BRA 4130 所 
示 。 将 相关 图 层 编组 , E 
命名 为 “丝带 "， 图 层面 ， 


板 如 图 4-131 所 示 。 


(G 羊 击 工具 箱 中 的 


“AR TL TA” 按钮 ， 


设置 如 图 4-132 所 示 的 参 : 
数 ， 在 画布 中 绘制 圆 角 甜 : 
形 。 单 击 “ 图 层 ” 面 板 
底部 的 “添加 图 层 样式 ” 
按钮 ， 在 弹出 的 “图 层 样 
式 ”对 话 框 中 选择 “内 阴 | 
影 ” 选 项 ， 设 置 如 图 4-133 | 


所 示 的 参数 。 





设置 如 图 4127 所 示 的 


《GO 单 击 工具 箱 中 的 
“ 横 排 文字 工具 ”， 在 画 
布 中 输入 如 图 4-128 所 示 : 
的 文字 。 使 用 相同 方法 完 : 
成 其 他 文字 的 输入 , 如 


站 页 面 布局 与 版 式 设计 





4-126 Ao 
R] 4-128 R] 4-129 


Ho Tup A 
不 透明 度 : 100% ~ 
LD A 1: 100% 





4-130 





4-132 na 
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ki3 使 用 相同 方法 完成 : 
相似 内 容 的 制作 ， 如 图 4- i 
134 所 示 。 单 击 工具 箱 中 : 
的 “ 横 排 文 字 工具 ”, 在 : 
画布 中 输入 如 图 4-135 所 : 
示 的 文字 。 | 

















| 到 4-134 到 4-135 
《4 使 用 相同 方法 完成 : Ms. sorna” 
其 他 文字 的 输入 ， 如 图 4- | S —Á 
136 所 示 。 将 相关 图 层 编 : > E AR 
组 ， ES 命 名 A “E A | 我 们 要 如 何 称 . 
区 ”， 图 层面 板 如 图 4-137 | 


PR, i T ETHER. 


BAHR 3 


AO omg 





Z 4-136 Æ| 4-137 
单 击 工 具 箱 中 的 : 北京 市 昌平 区 国 风 美 唐 办 公 楼 2 标 1303 室 
“ 横 排 文字 工具 ”， 在 国 WTA ER AE SOS 010-12345678 / 010-87654321 


布 中 输入 如 图 4-138 所 示 | 
的 文字 。 使 用 相同 方法 完 | 








1 2345867891 q9. com 











ios | 
成 其 他 文字 的 输入 ， 如 : Z] 4-138 Z] 4-139 
4-139 所 示 。 


006 有 单 击 工具 箱 中 的 
ABERIA” Rt, 
设置 如 图 4-140 PROS | 
数 ， 在 画布 中 绘制 圆 角 条 : 
形 。 单 击 图 层面 板 底部 的 : 
“添加 图 层 样 式 ” 按 钮 ，: 
在 弹出 的 “图 层 样式 ”对 : 
话 框 中 选择 “投影 ”选项 ， 
设置 如 图 4-141 所 示 的 : 
参数 。 





Z] 4-140 Z| 4-141 
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(0017 使 用 相同 方法 完成 : 
其 他 内 容 的 制作 ， 如 图 4- i 
i 
打开 ”命令 ,打开 素材 图 : 
像 “ 素 材 > 第 4 章 > i 
44309. png” 并 拖 入 到 画 : 

合适 位 置 ， 为 图 层 创建 
剪贴 蒙 版 ， 图 像 效 果 如 图 : 


4-143 所 示 。 


(Ga 单 击 工具 箱 中 的 
“ 自 定义 形状 工具 ” 按 | 
钮 ， 在 画布 中 绘制 RGB | 
(92、33、25) 的 图 形 ， 
图 像 效 果 如 图 4-144 所 | 
示 。 单 击 图 层面 板 底部 的 
“添加 图 层 样式 ”按钮 ， 
在 弹出 的 “图 层 样 式 ” 对 : 
话 框 中 选择 “投影 ”选项 , | 
设置 如 图 4-145 所 示 的 


(9 有 单 击 工具 箱 中 的 
“ 模 排 文 字 工具 ”， 在 画 : 
布 中 输入 如 图 4-146 所 示 ` 
的 文字 。 将 相关 图 层 编 
组 ， 图 层面 板 如 图 4-147 | 


所 示 。 


20 有 使 用 相同 方法 完成 : 
“底部 ”图 层 组 的 制作 ， : 
图 像 效果 如 图 4-148 所 
示 。 最 终 图 像 效果 如 图 4- : 


149 FT o 





DOS DCI da RE 





deis 4-143 





ii 4-145 





4-148 PE 
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根据 整体 内 容 决 是 网 贝 布局 








在 设计 布局 页 面 时 ， 每 个 元 素 的 重要 性 不 同 ， 因 此 所 米 用 的 排列 和 布局 方式 也 不 同 ， 考 


虑 好 不 同 内 容 的 排列 顺序 是 最 重要 的 。 如 果 要 根据 页 面 内 容 决定 网 页 版 式 布局 ， 


最 前 见 的 布 


局 形式 为 堪 侧 排 列 、 水 平 居中 排列 、 水 平和 垂直 居中 排列 以 及 满 屏 排列 四 种 ， 如 图 4-150 


所 示 。 


GEN aa O fanse 


Y 


回归 华夏 "a $ 
f: 万 福利 免费 $ $ 


N y 


Ao i 


de 
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此 外 有 些 网 站 在 设计 布局 时 ， 会 依据 网 站 的 目的 和 性 质 来 考虑 网 站 的 普遍 





性 。 因 为 一 般 


用 户 都 会 依据 个 人 爱好 来 设计 网 页 布局 。 但 如 果 想 要 使 设计 出 来 的 网 页 玩具 创意 和 与 众 不 


同 ， 还 需要 让 浏览 者 感受 到 网 站 的 实用 性 和 美观 性 。 
4.5.1 左 侧 的 网 页 布局 


左 侧 页 面 布局 是 指 页 和 面 中 的 内 容 居 左 排列 。 普 通 的 4 : 3 屏幕 分 辨 率 多 为 1024 x768px, 
所 以 制作 网 页 时 ， 一 般 会 确定 页 面 的 固定 宽度 为 1024px， 长 度 可 根据 具体 内 容 进行 调整 


如 果 大 于 768px， 则 需要 使 用 滚动 条 。 


如 果 用 户 使 用 16 : 9 宽屏 来 浏览 网 页 ， 那 么 1024px T poi 


E, ERNZANMNTANAO, FED ANUN RAMSAR, EA 
图 4-151 所 示 。 


Pas Pos 








llustrations Ne AGO COLORS 
j o your 
LOQO& Print AMA BRAND 
Animation 

Mobile 


Illustrations i 3 | COLORS 

O your 
A... your BRAND 
Web po > 
Animation 


4-151 


该 网 站 页 面 中 的 布局 结构 简练 而 富有 新 意 ， 通 过 色彩 的 运用 ， 将 页 面 背景 


—o 122 e 


填 满 整个 屏 
PER, Y 


处 理 为 小 乌 的 


网 站 页 面 布局 与 版 式 设计 





勇 影 ， 将 主体 部 分 设置 在 了 页 面 的 左 侧 ， 在 蝎 改 分 辨 率 时 ， 在 石 侧 自动 填充 白色 表 景 色 ， 整 
个 界面 简练 且 美 观 。 


> a | LL ē = = „L. r 
afe Je de JN. A T HJ AIS HI TN 7/5) 












水 平 居 中 的 页 面 布局 是 指 页 面 内 容 居 中 布局 ， 这 是 最 弟 见 的 一 种 页 面 布 局 方式 。 米 用 水 
平 居 中 的 方式 布局 页 面 虽然 很 保险 ， 但 很 容易 导致 版 面 采 板 和 单调 ， 因 此 需要 在 求 稳 的 基础 
E, TAMER ECS 

当 用 户 使 用 宽频 浏览 页 面 时 ， 页 面 的 左右 两 侧 会 被 同时 扩充 ， 以 填 满 屏幕 ， 比 较 弟 用 的 
方法 是 使 用 纯色 、 潮 变色 或 图 案 ， 如 图 4-152 所 示 。 
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ZINMGAAJE a A KANE A, PARADA AS, TIRABA AL 
时 ， 左 石 网 侧 自 动 填充 白色 育 景色 ， 人 整体 界面 内 容 依旧 保证 水 平 居 中 状态 。 


45.3 KK 平和 计 中 由] 页 下 

















水 平和 垂直 居中 布局 是 指 将 页 面 的 模 疝 和 纵 癌 都 设 定 为 100% 的 布局 方式 ， 这 类 网 页 在 
任何 分 辨 率 的 屏幕 中 都 会 绝对 居中 显示 。 

如 果 一 款 页 面 及 用 了 整体 性 很 强 ， 或 者 很 独特 的 排版 方式 ， 任 何 细微 的 改动 都 可 能 导 
页 面 的 美观 度 大 幅 下 降 ， 那 么 就 需要 使 用 这 种 方式 布局 页 面 ， 如 图 4-153 所 示 。 


Low Meraleis a series of animations portraying ore 
mas strug ge 1 sope withthe zoul-zapping, will-to-live 
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该 网 站 使 用 纸张 元 素 对 页 面 育 景 进行 痛 饰 ， 并 且 采 用 铅笔 素 搞 的 效果 与 纸张 相 匹配 ， 使 
得 该 页 面 的 设计 风格 副 含 一 种 强烈 鸭 亏 术 气 县 。 该 界面 无 论 分 辨 率 如 何 变 化 ， 始 终 保 证 页 面 
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满 屏 的 页 面 布局 是 指 在 搭建 程序 时 ， 不 为 页 面 中 的 各 Da 设置 固定 的 位 置 ， 而 是 采用 
相对 的 百分比 放置 元 素 。 这 样 在 不 同 分 辨 紊 下， 页面 中 的 各 个 元 素 就 会 自动 调整 显示 的 位 

， 使 页 面 永远 满 屏 显示 。 

但 是 这 种 布局 方式 也 存在 一 个 缺 挟 ， 如 果 屏 问 分 辩 窒 发 生变 化 ， 页 面 中 的 图 便 也 可 能 被 
缩放 ， 这 就 无 法 保证 图 像 的 清晰 度 。 解 决 这 个 问题 的 方法 就 是 使 用 矢量 图 形 和 Flash 动画 代 
替 位 图 图 像 ， 如 图 4-154 所 示 。 
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该 界面 采用 了 满 屏 的 页 面 布 局 方式 ， 并 使 用 多 张 图 片 素材 填充 整个 界面 ， 使 浏览 者 在 视 
癌 上 享受 舒适 感 和 随意 感 ， 此 界面 随 分 辨 率 的 变化 而 变化 ， 始 终 保证 满 屏 显示 。 


46 页 面 分 割 方式 


在 进行 网 员 布 局 设计 时 ， 首 先 需 要 通过 页 和 面 中 所 有 的 元 素 、 页 面 的 分 割 
局 方式 将 网 页 基本 格式 确定 下 来 。 页 面 的 分 割 方式 主要 有 横 癌 分 割 、 纵 向 分 
合 分 割 3 种 形式 。 根 据 网 站 的 类 型 和 页 面 中 内 容 的 多 少 和 不 同 ， 选 择 适 当 的 
式 可 以 使 得 网 页 界面 的 效果 与 众 不 同 。 

通 弟 情况 下 ， 横 回 分 割 和 纵 癌 分 割 适 用 于 页 面 内 容 较 少 的 网 站 ， 而 复合 分 割 多 用 于 页 面 
PARERS HMH. 


4.6.1 


A AS e 
划分 为 几 个 区 域 , 一 般 将 菜单 和 导航 设置 在 页 面 的 上 方 ， 主 体 部 分 设置 在 页 面 的 下 方 。 

在 分 割 页 面 时 ， 如 果 要 强调 页 面 的 整体 协调 性 ， 最 好 采用 横向 分 割 ， 因 为 横向 分 割 页 面 
的 视觉 效果 更 符合 阅读 习惯 ， 如 图 4-155 所 示 。 
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4.6.2 ZAI 


纵 问 分 割 也 是 比较 前 用 的 一 种 页 面 分 割 方式 。 对 页 面 进行 纵 癌 切割 时 ， 最 前 见 的 布局 方 
式 就 是 在 页 面 左 侧 安 排 一 列 导航 或 菜单 ， 并 使 用 醒目 的 闫 色 对 其 进行 品 调 。 页 面 的 右 侧 通 总 
会 安排 一 些 正文 内 容 或 各 类 信息 。 

这 种 分 割 方式 一 般 会 应 用 于 分 类 多 、 信 息 量 大 的 网 页 ， 使 用 这 种 方法 可 以 最 大 限度 地 强 
调 导 航 和 菜单 ， 方 便 用 户 分 类 检索 信息 ， 并 且 在 显示 器 分 辩 紊 发 生变 化 时 ， 也 只 会 影响 右 侧 
的 内 容 ， 左 侧 的 菜单 和 导航 不 会 发 生变 化 ， 如 图 4-156 所 示 。 
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4.6.3 复合 分 割 


通常 大 部 分 网 站 采用 的 是 横向 分 害 和 纵向 分 害 相 结合 的 方式 来 对 页 面 进行 布局 设计 。 如 
果 要 同时 横向 纵向 分 割 页 面 ， 那 么 通常 是 以 纵向 分 割 为 基础 。 例 如 页 面 的 左 侧 是 一 列 菜单 ， 
右 侧 的 正文 部 分 采用 横向 分 割 的 方式 排列 信息 。 有 些 时 尚 类 网 站 非常 青睐 这 种 布局 方式 ， 将 
照片 、 色 块 和 说 明文 字 交 错 排列 ， 效 果 非 常 养眼 ， 如 图 4-157 所 示 。 
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运用 固定 区 域 的 设置 





在 网 页 设计 中 ， 运 用 固定 区 域 是 指 在 页 面 中 的 菏 个 特定 区 域 显 示 全 部 的 内 容 ， 这 就 意味 
着 网 页 设计 出 来 的 效果 就 是 在 浏览 器 中 看 到 的 样子 ， 页 面 中 的 各 个 部 分 不 会 根据 屏幕 分 辨 率 
的 变化 而 改变 布局 方式 。 

按照 是 舍 将 固定 区 域 独立 使 用 的 标准 ， 可 以 将 使 用 固定 区 域 的 布局 方式 分 为 两 类 ; 只 
用 固定 区 域 和 运用 与 整个 区 域 搭 配 的 固定 区 域 。 

实际 上 很 难 定 义 运 用 固定 区 域 设 计 到 底 属于 页 面 布 局 结构 中 的 哪个 类 别 。 但 是 由 于 是 在 
回 定 的 区 域 ， 根 据 页 面 比例 和 排版 方式 等 方面 划分 布局 方式 ， 因 此 ， 将 其 归纳 到 复合 结构 类 
型 中 。 由 于 “固定 区 域 ” 本 号 的 独特 性 ， 将 其 划分 为 独立 网 页 结构 中 的 一 个 类 型 ， 如 
2] 4-158 所 示 。 


GI 


= Ana E OB sto mA» 





a å " 
mbuananan studio 
audio video designer studio 


< knassar 


sectetuer adipiscing ekt, zed diam 
minim dolor st amet, minim dolor E arat, 








EE 网 站 页 面 布局 与 版 式 设计 


UY 提示 
这 种 结构 也 有 不 足 的 一 面 ， 由 于 固定 区 域 的 尺寸 和 界限 非常 明确 ， 所 以 当 使 用 者 将 
Web 浏览 器 扩大 到 闲 个 界面 时 ， 固 定 区 域 的 特殊 状态 会 给 人 一 种 疏远 的 感觉 。 








4 网 页 布局 设计 的 连贯 性 和 多 样 性 


在 网 页 布局 设计 中 ， 准 确 传 达 网 站 的 整体 性 非 弟 重要 ， ATA R Ya — 
AAA ESA, OTRA NERD EA BUE, AREAS ZE 
的 连贯 性 。 

视 半 上 的 连贯 性 是 指 通 过 对 图 文 和 其 他 多 媒体 元 素 的 一 系列 编排 ,来 构建 出 网 站 整体 一 
致 的 视觉 效果 。 动 态 交 互 的 连贯 性 是 指 提 供 在 所 有 页 面 中 都 适用 的 Logo、 导 航 、 菜 单 和 具 
体内 容 等 元 素 供 用 户 浏览 ， 如 图 4-159 所 示 。 
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虽然 网 页 设计 的 连贯 性 非 党 重要， 但 不 能 一 味 地 为 了 保持 连贯 性 而 导致 网 页 页 面 过 于 单 
调和 枯燥 。 因 此 根据 网 站 类 型 适当 地 调节 网 页 界面 布局 的 连 员 性 ， 才 能 更 好 地 发 挥 页 面 布局 
设计 的 优势 


(49 专家 支 招 


本 章 主要 讲解 了 网 页 布局 和 版 陈设 计 的 相关 知识 ， 通 过 本 章 的 学 习 ， 相 信用 户 对 移动 端 
和 计算 机 端的 网 页 布局 有 了 一 定 的 了 解 和 掌握 。 在 设计 网 页 时 ,确定 好 板式 及 分 割 方式 后 ， 
就 可 以 进行 网 页 设计 了 。 
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4.9.1 网 页 界面 设计 的 设计 误区 


O 不 重视 域名 和 空间 

不 少 企业 在 进行 网 页 设计 时 ， 不 注重 域名 和 空间 的 稳定 性 ， 随 便 找 个 域名 和 空间 来 注 
册 。 一 个 空间 可 以 存放 很 多 网 站 ， 一 旦 其 中 一 个 网 站 被 降 权 ， 将 影响 到 其 他 的 网 站 ， 选 择 好 
的 、 有 保障 的 供应 丙 非 常 重要 。 

O 注重 外 观 不 注重 实用 

很 多 企业 在 进行 网 页 设计 时 ， 注 重 网 站 外 观 是 人 否 漂 亮 ， 有 的 网 页 为 追求 漂亮 ， 用 了 大 量 
的 Flash， 实 际 上 Flash 不 利于 企业 开展 网 络 营 宵 ， 建 议 企业 在 进行 网 页 设计 时 ， 不 仪 要 重视 
它 的 外 观 是 否 漂亮 ， 还 要 注意 网 页 是 否 迎 合 搜索 引擎 的 喜好 。 

O 网 站 维护 的 缺乏 

很 多 企业 把 网 页 建 好 以 后 就 不 管 不 问 了 ， 有 的 网 页 成 年 至 月 没有 更 新 内 容 ， 这 样 百 度 就 
无 法 收录 ， 对 于 企业 来 说 ， 必 须 找 一 些 专 业 人 士 定 期 进行 网 页 内 容 的 更 新 。 


4.9.2 网 页 界面 设计 的 设计 理念 


O 内 容 决 定形 式 

先 把 内 容 充 实 上 ， 再 分 区 块 ， 定 色调 ， 处 理 细 六 。 

O 先 整 体 ， 后 局 部 ， 最 后 回归 到 整体 

全 局 考虑 ， 把 能 填 上 的 都 填 上 ， 占 位 置 。 然 后 定 基调 ,分 模块 设计 。 最 后 调整 不 满意 的 
LAERT o 

O 功能 决定 设计 方 同 

看 网 站 的 用 途 ， 决 定 设 计 思 路 ， 商 业 型 的 就 要 突出 启 利 目的 ， 政 府 型 的 就 要 突出 形象 和 和 
权威 性 的 文章 ， 教 育 型 的 ， 就 要 突出 师资 和 谍 程 。 


wol 展 


通过 本 章 的 学 习 ， 用 户 需 要 掌握 各 种 网 页 界面 布局 的 表现 形式 ， 能 够 在 网 页 设计 过 程 
中 ， 灵 活 运 用 各 种 不 同类 型 的 网 页 界面 布局 。 
4.10.1 本 章 小 结 

本 章 主要 讲解 一 些 网 页 版 式 和 布局 方面 的 技巧 ， 包 括 常见 的 网 页 布局 方式 、 根 据 内 容 决 定 
页 面 布局 方式 ， 以 及 页 面 的 分 割 方式 等 内 容 。 在 设计 网 页 时 ， 根 据 页 面 排列 方式 和 布局 的 不 


同 ， 每 个 位 置 的 重要 性 也 不 同 ， 因 此 ， 需 要 根据 需要 合理 设计 网 页 界面 。 网 页 布局 和 排版 是 一 
项 无 法 速成 的 紊 章 ， 只 有 系统 党 握 色 彩 和 有 收 式 的 和 关系 ， 不 断 进 行 买 战 训练 才能 有 上 所 提高 。 


4.10.2 ”举一反三 一 一 制作 简洁 网 页 登陆 界面 


这 是 一 款 简洁 的 网 页 登录 界面 ， 此 款 界 面 以 绿色 作为 主 色调 ， 辅 色 用 到 了 白色 。 通 过 运 
E E AAA ARHERHE ERAR, 
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源 文 件 地 址 : 源 文件 \、 第 4 章 \ 制作 简洁 网 
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页 登录 界面 .PSD 


视频 地 址 : 视频 \ 第 4 章 \ 制作 简洁 网 页 县 ER. . MP4 


L 执行 “文件 > 打开” 命令， 打开 一 张 素材 图 


像 并 使 用 高 斯 模糊 来 模糊 图 像 。 


3. 使 用 “ 横 排 文 字 工具 ”输入 文字 ， 并 使 用 相 
同方 法 制作 相似 内 容 。 图 





2. 使 用 “ 圆 角 和 矩形 工具 ”绘制 医 


层 样式 。 


4. 使 用 相同 方法 完成 图 标的 制作 ， 并 添加 相应 的 
层 样式 。 
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网 站 页 面 主 要 由 图 片 和 文字 组 成 ， 由 此 可 见 图 片 是 网 页 
的 元 素 之 一 。 aa A 
行 优 化 和 调整 ， 否 则 可 能 出 现 图 片 加 载 时 间 过 长 的 问题 ， 

而 导致 用 户 体 验 降 低 。 
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图 像 在 网 员 设 计 中 具有 很 重要 的 作用 ， 图 像 的 加 入 为 网 页 界面 市 来 了 喝 为 直观 的 表现 形 
式 。 在 很 多 网 页 界面 中 ， 图 像 鼎 据 了 大 部 分 空间 甚至 是 整个 界面 。 图 像 可 以 豚 引 浏览 者 的 眼 
球 ， 激 发 浏览 震 的 阅读 兴趣 。 图 像 给 予 浏览 者 的 刺激 要 优 于 文字 ， 合 理 恰 当地 运用 图 像 ， 可 
以 丰富 页 面 ， 也 可 以 生动 直观 地 表现 设计 主题 ， 如 图 5-1 所 示 。 
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9 TIA ERAN ARABE ARA, PARAR ERAN, PA 
在 设计 图 片 内 容 时 ， 要 注意 是 人 否 具有 代表 性 。 

O Web ZE ER 

不 同 的 平台 有 不 同 的 调 色 板 ， 不 同 的 浏览 器 也 有 自己 的 调 色 板 。 这 就 意味 着 对 于 一 幅 
图 ， 显 示 的 效果 可 能 圭 别 很 大 。 选 择 特 定 的 颜色 时 ， 浏 览 亏 会 尽量 使 用 本 身 所 用 的 调 色 板 中 
最 接近 的 颜色 。 如 果 浏 览 器 中 疫 有 所 选 的 颜色 ,就 会 通过 拌 动 或 者 混合 自身 的 颜色 来 尝试 重 
新 产生 该 颜色 。 

@ 图 厂 分 辨 率 

网 页 图 拨 往 往 不 要 求 具 有 很 高 的 分 辨 率 ， 标 准 分 辨 率 为 72 像素 /天 寸 。 

@ 图 片 优化 

图 片 文件 的 大 小 影响 着 图 片 加 载 的 速度 ， 图 片 过 大 会 导致 图 片 加 载 缓慢 ， 因 此 创建 切 上 
时 ， 需 要 对 图 像 进 行 优 化 ， 以 减 小 文件 的 大 小 。 


5.1.1 网 站 中 使 用 的 图 片 格式 


适用 于 网 站 的 图 片 格式 主要 有 5 种 ,分 别 为 GIF A, JPEG 格式 、PNG-8 格式 、PNG- 
24 和 和 WBMP 格式 。 

GIF 是 一 种 位 图 图 形 文件 格式 ， 以 8 位 色 重 现 真 彩色 的 图 像 。GHIF 文件 的 数据 ， 是 一 种 
基于 LZW 算法 的 连续 色调 的 无 损 压 纺 格 式 ， 其 压 纺 率 一 般 在 50% 左右 。GIF 图 像 文件 的 数 
据 是 经 过 压缩 的 ， 而 且 是 采用 了 可 变 长 度 等 压缩 算法 。GIF 格式 的 力 一 个 特 尽 是 其 在 一 个 
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GIF 文件 中 可 以 存 多 幅 彩 色 图 像 ， 如 果 把 存 于 一 个 文件 中 的 多 幅 图 像 数 据 逐 幅 读 出 并 显示 到 
屏幕 上 ， 就 可 构成 一 种 最 简单 的 动画 。 


JPEG 是 Joint Photographic Experts Group (联合 图 像 专 家 组 ) WEAS, 文件 后 辍 名 为 
“.jpg” 或 “. jpeg”。 它 是 一 种 支持 8 位 和 24 位 色彩 的 压缩 位 图 格式 ， 适 合 在 网 络 上 传输 ， 
是 当前 非常 流行 的 图 像 文件 格式 。 





每 一 张 “PNG-8” 图 像 ， 最 多 只 能 展示 256 种 颜色 ， 所 以 该 格式 更 适合 那些 颜色 比较 单 
一 的 图 像 ， 例 如 纯色 、logo 和 图 标 等 ， 因 为 颜色 数量 少 ， 所 以 图 片 的 体积 也 会 更 小 ， 如 
图 5-2 所 示 。 


每 一 张 “PNG-24” 图 像 ， 可 展示 的 颜色 就 远 远 多 于 “PNG-8” 了， 最 多 可 展示 的 颜色 
数量 多 达 1600 万 ; 所 以 “PNGC-24” 所 展示 的 图 睛 颜色 会 更 丰富 ， 图 片 的 清晰 度 也 会 更 好 ， 
图 片 质量 更 高 ， 当 然 图 片 的 大 小 也 会 相应 增加 ， 所 以 “PNG-24” 比较 适合 颜色 丰富 的 图 片 ， 
如 图 5-3 所 示 。 





U 提示 
PNG-8 和 PNG-24 的 根本 区 别 不 是 色 位 的 区 别 ， 而 是 存储 方式 不 同 。PNG-8 有 1 位 
的 布尔 透明 通道 (LARGA, 要么 完全 不 透明 )，PNG-24 则 有 8 位 的 布尔 透明 通道 
(所 谓 半 透 明 ) 。 








WBMP 是 一 种 移动 计算 机 设备 使 用 的 标准 图 像 格 式 。 这 种 格式 特定 使 用 于 WAP 网 页 
中 。WBMP 支持 1 位 颜色 ， 即 WBMP 图 像 只 包含 黑色 和 白色 像素 ， 而 且 不 能 制作 得 过 大 ， 
这 样 在 WAP 手机 

颜色 模式 ， 是 将 某 种 颜色 表现 为 数字 形式 的 模型 ， 或 者 说 是 一 种 记录 图 像 颜 色 的 方式 。 


MIR 
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伟人 @ 鲁 网 站 页 而 图 像 的 优化 与 调整 








分 别 为 : RGB 模式 、CMYK RA, HSB 模式 、Lab 
MER. MERA, HERA, RSIMBI, 
双色 调 模 式 和 多 通道 模式 。 在 网 页 中 则 全 部 采用 的 
是 RGB 模式 。 

由 于 网 页 是 基于 计算 机 浏览 器 开发 的 媒体 ， 所 
以 颜色 以 光学 颜色 RGB 为 主 ， 如 图 5-4 所 示 ， 并 
AF RGB 模式 下 处 理 图 像 较 为 方便 ， 而 且 喇 用 内 
存 最 小 ， 可 以 有 效 和 省 存储 空间 。 





图 草 工 具 的 使 用 





Photoshop 中 的 图 章 工 具 共 有 两 种 ， 包 括 “ 仿 制图 章 工具 ”和 “图 案 图 章 工 具 ”， 可 以 
快速 修复 图 像 中 的 缺陷 和 瑕 普 ， 或 者 为 图 像 添加 各 种 艺术 效果 。 


5.2.1 仿制 图 章 的 应 用 
“仿制 图 章 工具 ”可 以 将 图 像 中 的 像素 复制 到 其 他 图 像 或 同一 图 像 的 其 他 部 分 ， 可 在 同 


一 图 像 的 不 同 图 层 间 进行 复制 ， 对 于 复制 图 像 或 覆盖 图 像 中 的 缺陷 十 分 重要 。“ 念 制图 章 工 
具 ” 选 项 栏 如 图 5-5 所 示 ， 在 该 选项 栏 中 ， 用 户 可 以 设置 “样本 ”“ 对 齐 ” 等 属性 。 


2. .- E 模式 : 正常 ~ HEBE: 100% ~ @ AE: w% + (4 四 对 fx: 当前 图 层 
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@ 切换 仿制 兰 面 板 : Lanza, ITA “AR” MA. 
@ 对 齐 : 匀 选 该 选项 ， 会 对 像素 进行 连续 取 祥 ， 在 仿制 过 程 中 ， 取 桩 氮 随 仿制 位 置 的 
移动 而 变化 。 
单 击 工具 箱 中 的 “仿制 图 章 工 具 ” 按 钮 ， 按 住 Alt 键 ， 单 击 图 像 中 的 相似 区 域 进行 取 
桩 ， 然 后 在 图 像 中 多 余 的 文字 部 位 涂抹 ， 即 可 将 其 去 除 ， 如 图 5-6 所 示 。 
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AZA ZRII PR RR 


在 进行 网 员 设 计时 ， 往 往 会 通过 不 同 渠 道 获 取 图 像素 材 ， 而 往往 这 些 图 像 都 会 存在 一 些 
琶 疫 ， 其 中 水 印 是 最 为 章 见 的 。 这 时 使 用 “仿制 图 草 工 具 ” 就 可 以 轻松 解决 。 








视频 地 址 


YONO 网 站 UI 设计 第 2 版 


册 角 和 矩形 工具 、 念 制图 章 工 具 
15 分 钟 


视频 \ 第 5 章 \ 去 除 网 页 中 的 水 印 效 果 . mp4 





产 文 件 地 址 


人 01 有 执行 “文件 > 打开 ”| 
图 像 效果 如 图 577 : 
所 示 。 单 击 工 具 箱 中 的 : 
“和 矩 形 选 框 工具 ”按钮 ， 
在 画布 中 单 击 并 拖 中 局 : 
标 创建 选区 ， 如 图 5- 8 


人 人 
Mas 


PTA o 


Um 


产 文件 \ 第 5 章 \ 去 除 网 页 中 的 水 印 效果 . psd 





Wa, Y wy y 


\ | | 
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使 用 “仿制 图 章 工具 ”时 要 注意 细节 的 处 理 ， 根 据 涂抹 位 置 的 不 同 ,，“ 笔 能 ”的 大 
小 也 要 变化 ， 而 且 要 在 不 同 的 位 置 取样 ， 然 后 进行 涂抹 ， 这 样 才能 保证 最 后 效果 与 原始 


图 像 相 融合 ， 没 有 瑕 疫 。 





《c3 执 行 “ 编 辑 > 填充” 
命令 ， 在 弹出 的 “填充 ” 
对 话 框 中 选择 “内 容 识 
别 ” 选 项 ,如 图 5-9 所 
示 。 单 击 工具 箱 中 的 “ 仿 : 
制图 章 工具 ”， 按 住 Alt i 
键 ， 单 击 图 像 中 的 相似 区 : 
域 进行 取样 ， 然 后 在 图 像 : 


中 涂抹 ， 如 图 5-10 所 示 。 


—o 134 6 


ES 
填充 


选项 


颜色 适应 [ 口 ) 


R=] 
Ek 
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GOG MARA DAL SHE 





U ER 
在 使 用 “仿制 图 章 工具 ”时 ， 按 ] 键 可 以 加 大 笔 刷 尺寸 ， 按 [ 键 可 以 减 小 笔 刷 尺寸 。 
按 快捷 键 Shift + ] 可 以 增强 笔触 的 硬度 ， 按 快捷 键 Shift + [ 键 可 以 减 小 笔触 的 硬度 。 





ko3) 使 用 “仿制 图 章 工 
具 ” 在 画布 中 涂抹 ， 如 图 : 
5-11 所 示 。 执 行 “ 文 件 > | 
打开 ”命令 , ER E: 
角 矩 形 工具 ”在 画布 中 绘 : 
制 形 状 ， 图 像 效 果 如 
图 5$-12 所 示 。 
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将 刚刚 处 理 过 的 素 : o Dur AA 
材 图 像 移 入 到 设计 文档 
中 ,并 为 其 添加 剪贴 蒙 : 
版 ,如 图 5-13 所 示 。 使 
用 相同 方法 完成 相似 内 容 : 
的 制作 ,图像 效果 如 
图 5-14 所 示 。 





t Pakkelssning 1 + Pakl 
Lorem ipsum dolor sit amet, con- Lorem 


sectetuer adipiscing elit. Mauris at 到 BCtetL 
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5.2.2 图 案 图 章 工 具 的 应 用 


“图 案 图 章 工 具 ” 可 以 利用 Photoshop 提供 的 图 案 或 自 定 义 的 图 案 进 行 绘画 。“ 图 案 图 章 
工具 ”选项 栏 如 图 5-15 所 示 ， 在 该 选项 栏 中 ， 读 者 可 以 设置 “图 案 ”“ 对 齐 ” 和 “印象 派 
效果 ”等 属性 。 


v PME: 100% ~ Æ 100% v € O r O metir ”地 
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@ ES: 单 击 该 按钮 可 打开 “图 案 拾 色 器 ”， 可 以 选择 更 多 图 案 ， 如 图 5-16 所 示 。 

@ 对 齐 : 匀 选 该 选项 ， 在 涂抹 图 案 时 ， 可 保持 图 案 原 始 起 氮 的 连续 性 ， 即 使 多 次 单 击 
鼠标 绸 次 涂抹 ， 都 不 会 重新 应 用 图 案 。 

O 印象 派 效 果 : 色 选 该 复 选 枉 ， 可 以 为 填充 图 案 添 加 模糊 效果 ， 和 模拟 出 印象 派 效 果 ， 
如 图 5-17 所 示 。 取 消 勾 选 该 复 选 框 ， 绘 制 出 的 图 案 将 清晰 可 见 。 
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氏 5-16 2] 5-17 
(5368 Ay 
修复 图 像 的 工具 有 很 多 ， 包括 “仿制 图 章 工 具 ”“ 污 点 修复 画笔 工具 ”“ 修 复 画 笔 工 


具 ” 和 “修补 工具 ”等 ， 通 过 使 用 这 些 工 具 ， 可 以 轻松 地 去 除 图 像 中 的 污点 和 TAN R H 
AJIRA o 





“污点 修复 国 笔 工具 ”的 作用 是 快速 去 除 图 像 上 的 污点 、 划 狠 和 其 他 不 理想 的 部 分 。 已 
可 以 使 用 图 像 或 图 案 中 的 样本 像素 进行 绘 田 ， 并 将 样本 像素 的 纹理 、 光 照 、 透 明度 和 阴影 三 
所 修复 的 像素 相 匹 配 ， 还 可 以 自动 从 所 修饰 区 域 的 周围 取样 。“ 污 扣 修 复 男 笔 工 具 ” 选 项 栏 
如 图 5-18 所 示 。 


类 型 ;内容 识别 eege GAR O 对 所 有 图 层 取样 E 





5-18 


O 内 容 识 别 

可 以 使 覆盖 填充 的 区 域 进行 拼接 与 融合 ， 从 而 达到 无 颖 的 拼接 效果 。 
@ 创建 纹理 

可 以 使 用 选区 内 的 所 有 像素 创建 纹理 来 修复 该 区 域 。 

@ 近似 匹配 

可 以 使 用 选区 边缘 周围 的 像素 来 查找 要 用 于 选 定 区 域 修 补 的 图 像 区 域 。 
O 对 所 有 图 层 取样 

可 以 从 所 有 可 见 的 图 层 中 进行 取样 。 


QA LESA 


ARATIOTA, AMERO ESA, DARAS LADERA PA 
水 印 是 最 为 常见 的 。 这 时 使 用 “ 污 护 修复 画笔 工具 ”就 可 以 轻松 解决 。 





《1 执行 “文件 > 打开 ” 
命令 ,打开 素材 图 像 “ 素 : 
材 > 第 5 章 >53101. png”, | 
图 像 效 果 如 图 5-19 所 示 。 
单 击 工具 箱 中 的 “污点 修 
复 画笔 工具 ”按钮 ， 直 接 : 
单 击 需要 修复 的 部 位 ,将 : 


其 修复 ， 如 图 5-20 所 示 。 


《3 修复 完成 后 ， 图 像 
效果 如 图 5-21 所 示 。 继 : 
续 单 击 工具 箱 中 的 “污点 : 
修复 画笔 工具 ”按钮 ， 在 
画布 中 涂抹 ， 如 图 5-22 


所 示 。 


《3 执行 “文件 > 打开 ” 
命令 , 打开 素材 图 像 “ 素 
材 > 第 5 章 >53102. png”, | 
图 像 效果 如 图 5-23 PRO 
单 击 工具 箱 中 的 “ 甜 形 
工具 ”按钮 ， 在 画布 中 绘 
制 填充 无 描 边 为 RGB 
(167, 167, 167) 的 矩形 ， 


如 图 5-24 所 示 。 





网 站 页 面 图 像 的 优化 与 调整 


和 窍 形 工具 、 污 点 修复 画笔 工具 

15 分 钟 

视频 \ 第 5 LA BARRIE. mp4 
源 文件 \ 第 5 章 \ 修复 图 像 政 钼 . psd 
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5-21 5-22 








5-23 5-24 
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(0) EA : 
“SEKIR” HE, En? 
布 中 绘制 矩形 ， 如 图 5-25 党 
所 示 。 将 刚才 修改 好 的 素 '” 
材 拖 所 至 设计 文档 中 ,如 | 
5-26 所 示 。 dl 

















Ihr Lácheln, unsere Beratung 
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《c5 使 用 快捷 键 cml + 了 Denia one Anc 
BEERE, BERBA aon, 
小 到 如 图 5-27 所 示 。 执 : minar 
行 “图 层 > 创建 剪贴 莹 :mm 
版 ”命令 ， 为 图 层 创建 剪 };  。 
贴 蒙 版 ， 或 者 选中 图 层 单 : 







































































击 鼠 标 右键 ， 在 弹出 的 快 : — 
捷 菜 单 中 选择 “创建 剪贴 
蒙 版 ”选项 ， 如 图 528; 


所 示 的 人 参数。 
(3 创建 完成 后 ， 图 层 : 
面板 如 图 5-29 所 示 。 所 : 
有 操作 告 一 段落 后 ， 网 页 
最 终 效果 如 图 5-30 所 示 。 
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“修复 画笔 工具 ”与 “仿制 图 章 工 具 ” 工 作 原 理 相 同 ， 也 是 利用 图 像 或 图 案 中 的 样本 
像素 来 绘 国 。 但 该 工具 可 以 从 被 修饰 区 工 的 周围 取样 ， 使 用 图 像 或 图 案 中 的 梓 本 像 兹 进 
行 绘 田 ， 并 将 样本 的 纹理 、 光 照 、 透 明度 和 阴影 等 与 所 修复 的 像素 匹配 ， 从 而 去 除 图 片 
中 的 污点 和 划 痕 ， 修 复 后 的 效果 不 会 产生 人 工人 修复 的 痕迹 “修复 画笔 工具 ”选项 栏 如 氏 
531 所 示 。 





时 E E 取样 
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EJES AR RA HE 





@ K: 可 以 在 图 像 的 像素 上 取样 。 
@ ES: 可 以 在 “图 案 ” 下 拉 列 表 中 选择 图 案 作为 样本 。 


5.3.3 修补 工具 


“修补 工具 ”可 以 用 其 他 区 域 或 图 案 中 的 像素 来 修复 选中 的 区 域 。 与 “修复 画笔 工具 ” 
工作 原理 相同 , 但 “修补 工具 ”需要 选区 来 定位 修补 沁 围 。“ 修 补 工 具 ” 选 项 栏 如 图 5-32 
PR 
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O 选区 创建 方式 : HARALD, SOTA ASA 

01: 用 来 设置 修补 的 万 式 ， 包括 “ 正 弟 ”和 “内 容 识 别 ” 两 种 方式 。 

O R: 选择 该 项 ， 将 选区 拖 动 介 要 修补 的 区 域 ， 会 修补 原来 的 区 域 。 

O 目标 : 选择 该 项 ， 将 选区 拖 动 到 其 他 区 域 ,， 可 以 将 原 区 域内 的 图 像 复 制 到 该 区 域 。 
© 透明 : 久 选 该 项 ， 可 使 修补 区 域 与 原 图 像 产生 透明 的 严 加 效果 。 

@ 使 用 图 案 : 在 下 拉 有 菜单 中 选择 一 个 图 案 后 ， 单 击 该 按钮 ， 可 以 使 用 图 案 修补 选区 内 
的 图 像 。 





“内 容 感 知 移动 工具 ”可 以 移动 图 像 中 条 区 域 像 素 的 位 置 ， 并 在 原 像素 的 区 域 自动 卉 充 
周围 的 图 像 。 单 击 “ 内 容 感 知 移动 工具 ”， 可 以 在 如 图 5-33 所 示 的 选项 栏 中 进行 相应 的 
设置 。 


Xo IE E CM ~ AA 





O 模式 : 该 下 拉 列 表 中 包含 两 个 选项 ， 分 别 为 “移动 ”和 “扩展 ”。 

@ 移动 : 在 图 像 中 创建 将 要 移动 的 选区 后 ， 移 动 选区 的 位 置 ， 那 么 原来 选区 的 位 置 将 
会 填充 附近 的 图 像 ， 如 图 5-34 所 示 。 

@ 扩展 : 移动 选区 中 的 图 像 ， 并 且 原 来 选区 内 的 图 像 不 会 改变 ， 如 图 5-35 所 示 。 
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当 图 片 中 的 人 物 素 材 有 红眼 现象 时 ， 使 用 Photoshop CC 中 的 “红眼 工具 ”只 需 在 红眼 
睛 上 单 击 一 次 即 可 修正 红眼 ， 使 用 该 工具 时 ， 可 以 调整 瞳孔 大 小 和 暗部 数量 。 


(5.4 自动 调整 图 像 色彩 


自动 调整 命令 可 以 对 图 像 颜色 进行 自动 调整 。 这 些 命令 包括 “自动 色调 ”“ 自 动 对 比 
度 ” 和 “自动 颜色 ”等 。 


通过 执行 “图 像 > 自动 色调 ”命令 ， 可 以 自动 调整 图 像 的 色调 ， 适 合 校正 疫 有 亮丽 感 
的 图 像 。 执 行 该 命令 后 ， 图 像 中 最 深 的 颜色 会 被 映射 为 黑色 ， ey 然 
后 重新 分 布 其 他 颜色 的 像素 ， 从 而 大 幅 提 高 图 像 的 对 比 度 ， 如 图 5-36 所 示 。 











2, 9. BANUSCON > 
nO / q eN > .. s 
y P 
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“自动 对 比 度 ” 命 令 可 以 自动 调整 图 像 的 对 比 度 ， 使 图 像 中 暗 的 地 方 更 暗 ， 亮 的 地 方 更 
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闯 色 没有 鲜明 对 比 的 图 像 进行 校准 ， 如 图 5-37 所 示 。 





5-37 





上 提示 
A A 
可 以 改进 彩色 图 像 的 对 比 度 


5.4.3 自动 颜色 
”命令 ， 可 以 自动 调整 图 像 的 对 


当 图 厂 素 材 出 现 偏 色 的 现象 时 ， 通 过 执行 “自动 颜色 ”命令 ， 
比 度 和 和 色彩， 使 偏 色 的 图 像 得 到 校正 。 i DR 


不 能 单独 调整 颜色 通道 ， 所 以 色调 不 会 改变 ， 





能 调整 对 比 度 ， 


度 ， 但 无 法 移 除 图 像 中 的 色 偏 。 


5-38 所 示 。 
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Fo ARRE 


命令 主要 用 于 对 图 像 的 基本 色调 进行 调整 ， 主 要 包含 “曲线 ”"、“ 色 阶 ”"、“ 亮 度 /对 
些 命令 可 以 调整 出 个 性 的 色彩 ， 使 图 像 更 具 


调整 ESA 
” MFE, ABEREMI 


比 度 ” 和 和 “色相 /饱和 度 
有 表现 力 。 
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通过 执行 “亮度 /对 比 度 ” 命 令 可 以 调整 图 像 的 亮度 和 对 比 度 打开“ 亮度/ 对比度 ” 
对 话 框 ， 可 拖 动 滑 块 来 调整 “亮度 ”与 “对 比 度 ”， 也 可 以 通过 在 文本 框 内 输入 数值 ， 来 调 
整 图 像 的 “亮度 ”和 和 “对比度 ”， 如 图 5-39 所 示 。 
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QA 调整 网 页 中 的 图 像 亮度 


在 进行 网 页 设计 时 ， 获 取 图 像素 材 可 能 会 导致 图 像 偏 暗 ， 尤 其 是 在 需要 突出 的 图 片 中 ， 
高 亮度 是 非常 重要 的 。 这 时 使 用 “亮度 /对 比 度 ” 就 可 以 轻易 解决 。 





RETA, A/C 

15 分 钟 

视频 \ 第 5 章 \ 调整 网 页 中 的 图 像 亮度 . mp4 
产 文件 \ 第 5 章 \ 调整 网 页 中 的 图 像 亮度 psd 














《ko13 执 行 “ 文 件 > 新 建 ”| 
命令 ， 设 置 如 图 5-40 所 


示 的 人 参数。 执行 “文件 > 


打开 ”命令 ,打开 素材 图 : 


像 “ 素 材 > 第 53 章 > 


55101. png”， 图 像 效 果 如 ， 


5-41 所 示 。 


《c3 习 单 击 工 具 箱 中 的 : 
SERIA” RH, tE 
布 中 绘制 任意 颜色 的 和 | 
形 ， 图 像 效 果 如 图 5- 42 
所 示 。 单 击 图 层面 板 底部 : 
的 “添加 图 层 样式 ” 按 : 
钮 ， 在 弹出 的 “图 层 样 : 
式 ” 对 话 框 中 选择 “外 
发 光 ” 选 项 ,设置 如 图 5- | 


43 所 示 的 参数 。 


Okt mE” RH, 
图 像 效 果 如 图 5-44 所 示 。: 
使 用 相同 方法 完成 相似 : 
内 容 的 绘制 ， 如 图 5- 45 


所 示 。 


[04 执行 “文件 > 打开 ”: 
命令 ,打开 素材 图 像 ， 图 | 
像 效 果 如 图 5- 46 所 示 。: 
执行 “图 像 > 调整 > 亮度 : 
/对 比 度 ” 命 令 ， 弹出 | 
“亮度 /对 比 度 ”对 话 框 , : 
设置 如 图 5- 47 所 示 的 i 
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Polskie owoce 


Lorem Ipsum jest tekstern stosowanym jako 


preyktadoluy wypelniacz w przernyéle poli- 





graficznym. zostat po raz pierwszy użyty. 
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Polskie owoce 


pe tt ee 
Lorem Ipsum jest tekstem stosowanym jako MM MN om 


przykladowy wypelmiacz w przemyśle poli- 






graficznym. Zostal po raz pierwszy użyty. 
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对 比 度 : 


司 用 旧版 (L) 


5-46 5-47 


YONO 网 站 UI 设计 第 2 版 


C05 将 则 刚 修改 好 的 图 
像 移入 到 设计 文档 中 ， 打 
开 图 层面 板 ， 将 其 移动 到 : 
GEL 1” MELIA, 4 
图 5-48 所 示 。 调 整 位 置 : 
和 大 小 ， 执 行 “ 图 层 > 创 
建 剪 贴 蒙 版 ”命令 ， 如 图 : 
5-49 所 示 。 


06 执行 “文件 > 打开 ”: 
命令 ， 打 开 素 材 图 像 ， 图 : 
像 效果 如 图 5-50 所 示 。 : 
执行 “图 像 > 调整 > 亮度 | 
/对 比 度 ” 命 令 ， 弹 出 
“亮度 /对 比 度 ” 对 话 框 ，: 
设置 如 图 5-51 所 示 的 
参数 。 


《co7 将 刚刚 修改 好 的 图 : 
像 移 入 到 设计 文档 中 , 打 
开 图 层面 板 ， 将 其 移动 到 : 
“矩形 1 拷贝 ”图 层 上 方 ，: 
如 图 5-52 所 示 。 调 整 位 : 
置 和 大 小 ， 执 行 “图 层 > | 
创建 剪贴 蒙 版 ”命令 , 如 
图 5-53 所 示 。 


《ca 执行 “文件 > 打开 ” 
命令 ,打开 素材 图 像 ， 图 : 
像 效 果 如 图 5-54 所 示 。 | 
执行 “图 像 > 调整 > 亮度 ， 
ZN 5, A 
“亮度 /对 比 度 ”对 话 框 ， 
设置 如 图 5-55 所 示 的 
参数 。 
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Krok po kroku - produkcja soku 


Lorem Ipsum jest tekster stosowanym jako 





Jé L 
关口 @ mgt przykladowy wypetniacz w przemyéle poli- kO amg 
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POG 网 站 页 面 图 像 的 优化 与 调整 





(09 有 使 用 相同 方法 完成 相 
似 内 容 的 制 Ua TA 5-56 s 
整体 页 面 效果 如 图 5-57 | 
所 示 。 








Zdrowy tryb życia 





Lorem Ipsum jest tekstem stosowanym jako 
prayktadowy wypelniacz w przemyśle poli- 
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色 阶 是 表示 图 像 亮度 强 弱 的 指数 标准 ， 也 就 是 我 们 所 说 的 色彩 指数 ， 图 像 的 色彩 丰满 度 
和 精细 上 度 是 由 色 阶 决定 的 。 执 行 “图 像 > 调整 > 色 阶 ”命令 ， 打开 “ 色 阶 ”对 话 框 ， 并 对 
直方 图 进行 调整 ， 如 图 5-58 所 示 。 

在 打开 的 图 层面 板 中 ， 单 击 面 板 底 部 的 “创建 新 的 填充 或 调整 图 层 ” 按 钮 ， 然 后 在 弹 
出 的 下 拉 列 表 中 选择 “ 色 阶 ”选项 ， 继 续 在 弹出 的 “属性 ”面板 中 设置 各 项 参数 ， 如 图 5- 
59 Hiro 
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@ HAEN: 通过 拖 避 靖 块 来 调整 图 像 的 阴影 、 中 间 调 和 高 区， 也 可 在 消 块 下 方 的 文 
本 框 中 输入 相应 的 数值 进行 调 

@ 输出 色 阶 : 通过 拖 动 ; 时 块 来 限定 图 像 的 亮度 沁 围 ， 同 样 也 可 在 滑 块 下 方 的 文本 框 中 
输入 数值 来 调整 图 像 的 亮度 。 

@ 上 自动: 可 以 通过 单 击 该 按钮 而 快速 进行 颜色 自动 校正 ， 使 图 像 的 膏 度 分 布 时 加 均匀 。 

@ 设置 黑 场 :使 用 该 工具 单 击 图 像 ， 被 单 击 辟 的 像素 会 变 为 黑色 ,而 且 比 单 击 点 瞳 的 


像素 也 会 变 为 黑色 。 
@ ZEND: 使 用 该 工具 单 击 图 像 ， 可 根据 单 击 点 的 亮度 来 调整 其 他 中 间 氮 的 平均 


@ 设置 白 场 : 使 用 该 工具 单 击 图 像 ， 同 样 被 单 击 点 的 像素 会 变 为 自 色 ， 而 且 比 单 击 扣 
完 度 值 大 的 像素 也 会 变 为 和 白色， 如 图 5-60 所 示 。 
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“曲线 ”也 是 用 于 调整 图 像 色彩 与 色调 的 工具 ， 它 允许 在 图 像 的 整个 色调 范围 内 最 多 调 
整 16 个 点 。 在 所 有 的 调整 工具 中 ,“ 曲 线 ” 可 以 提供 最 为 精确 的 调整 结果 。 

在 Photoshop 中 ， 用 户 可 以 通过 执行 “图 像 > 调整 > 曲线 ”人 命令， 打开“ 曲线 ”对 话 
框 ， 如 图 5-61 所 示 。 

打开 图 层面 板 ， 单 击 面 板 底 部 的 “创建 新 的 填充 或 调整 图 层 ” 按 钮 ， 在 弹出 的 下 拉 菜 
单 中 选择 “曲线 ”选项 ， 在 弹出 的 属性 面板 中 设置 各 项 参数 ， 如 图 5-62 所 示 。 

















@ His: 在 该 下 拉 列 表 中 包 售 了 一 些 预 设 选项 。 选 择 其 中 任意 选项 后 ， 则 会 使 用 预 设 
参数 来 调整 图 像 。 

© 通道 : SES “MERA” A RGB 时 ， 可 以 调整 RGB 复合 通道 和 红 、 绿 、 监 3 
种 颜色 通道 。 当 图 像 的 “颜色 模式 ”为 CMYK 时 ， 可 以 调整 CMYK 复合 通道 和 青 
色 、 详 红 、 黄 色 、 黑 色 4 种 颜色 通道 。 

O 编辑 点 以 修改 曲线 : 选择 该 按钮 时 ， 可 以 在 曲线 上 添加 新 的 控制 上 忠 ， 并 拖 动 曲线 来 
改变 图 像 的 色调 。 

O 绘制 修改 曲线 : 选择 该 按钮 ， 可 以 自由 绘制 曲 丝 来 调整 图 像 的 色调 。 

@ 明 影 /中 间 调 /高 光 : 在 曲线 的 上 、 下 两 尊 有 两 个 控制 上 品 ， 拖 动 左 下 方 的 控制 点 可 调 
整 图 像 的 黑色 区 域 ， 拖 动 右上 方 的 控制 尽 可 调整 白色 区 域 ,， 而 拖 动 曲线 中 间 的 控制 
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GON 网 站 页 而 图 像 的 优化 与 调整 
点 可 调整 中 间 色 调 。 
_/ 实例 ”执行 “的 线 ” 命 全 调整 图 像 
在 进行 网 页 设计 时 ， 获 取 图 像素 材 可 能 会 出 现 部 分 内 容 过 暗 或 过 亮 的 问题 ， 全 部 调整 无 


法 达到 理想 的 效果 。 这 时 使 用 “曲线 ”命令 就 可 以 轻易 解决 。 


ASION WEBDESIGN GALERIE 








使 用 到 的 技术 矩形 工具 、 剪 贴 蒙 版 、“ 曲 线 ”命令 


学 习 时 间 20 分 钟 


视频 地 址 视频 \ 第 5 章 \ 执行 “曲线 ”命令 调整 图 像 mp4 
产 文 件 地 址 源 文 件 \ ES 章 \ 执行 “曲线 ”命令 调整 图 像 . psd 











《1 执行 “文件 > 新建 ”; cs ma n 
命令 ， 设 置 如 图 5-63 所 E | A 

示 的 参数 。 执 行 “ 文 件 > | 
打开 ”命令 ,打开 素材 图 : 
像 “素材 > 第 5 章 > i 
55301. png”， 图 像 效 果 如 : 
图 5-64 所 示 。 





KG 习 单 击 工具 箱 中 的 
“SEKTA” (R, EE. 
布 中 绘制 如 图 5- 65 所 
示 的 形状 。 执 行 “ 文 件 > | 
打开 ”命令 ,打开 素材 
图 像 “素材 > 第 5 章 > | 
55302. png”, ARARAU 
5-66 所 示 。 | 5-65 5-66 
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Um 
此 处 明显 可 以 看 出 图 像 偏 暗 ， 因 此 在 曲线 中 将 阴影 部 分 的 曲线 向 上 调节 ， 将 图 像 中 
的 黑色 区 域 加 量 ， 还 原 图 像 本 身 的 色彩 。 





OJH Ear, E 
击 面板 底部 的 “创建 新 的 : 
填充 或 调整 图 层 ” 按 钮 ， : 
在 弹出 的 下 拉 列 表 中 选择 : 
“曲线 ”选项 ， 打 开 属 性 
面板 ,设置 如 图 5-67 所 
示 的 参数 。 
单 击 “和 确定” 按钮， 图 5-67 图 5-68 
成 图 像 的 调整 ， 图 像 效 果 : 

如 图 5-68 所 示 。 
捷 键 Ctrl + Shift + Alt + E, 








U 提示 
在 “曲线 ”对 话 框 中 ， 有 两 个 渐变 色 条 ， 水 平 的 渐变 颜色 为 输入 色 阶 ， 它 代表 了 原 





始 值 的 强度 ， 重 直 的 渐变 颜色 为 输出 色 阶 ， 它 代表 了 调整 后 的 像素 强度 。 


《co3] 将 刚刚 调整 好 的 图 : 
RRE A, FE 
适当 调整 位 置 和 大 小 , 图 : 
像 效 果 如 图 5- 69 所 示 。: 
执行 “图 层 > 创建 剪贴 蒙 | 
版 ”命令 ， 为 图 层 创建 剪 . 
贴 蒙 版 ， 图 像 效 果 如 图 5- : 








e el dolor 


70 所 示 。 | 5-69 5-70 
fo 用 Fe HE AE H o i rail amel, apa rete Sta ei 


在 画布 中 继续 绘制 任意 颜 : 
SE, mE 5-71 所 
示 。 执 行 “文件 > 打开 ”| 
命令 ,打开 一 张 素材 图 : 
像 ， 图 像 如 图 5-72 所 示 。 i 





5-71 5-72 
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伟人 @ 鲁 网 站 页 而 图 像 的 优化 与 调整 


《cs .将 刚刚 打开 的 素 
材 图 像 拖 入 到 设计 文档 | 
中 ， 使 用 快捷 键 Crl + To 
调整 位 置 和 大 小 , 如: 
图 5-73 所 示 ， 单 击 工具 箱 : 
中 的 “和 殉 形 工具 ”按钮 ， 
在 画布 中 绘制 矩形 ， 如 
图 5-74 所 示 。 | 
人 (06 有 打开 图 层面 板 ,， 设 
置 图 层 的 不 透明 度 为 : 
50%, +0 El 575 所 示 。 
设置 完成 后 ， 图 像 效果 如 | 
图 5-76 所 示 。 











OPER HET : 
具 ” 在 画布 中 输入 相应 文 | 
字 ， 使 用 “ 自 定义 形状 工 : 
具 ” 在 画布 中 绘制 形状 ，| 
如 图 5-77 所 示 。 网 页 最 : 
终 效果 如 图 578 所 示 。 ` 





图 5-77 5-78 














- E i 
We eR 





通过 执行 “自然 饱和 度 ” 命 令 可 以 调整 图 像 色 彩 的 饱和 度 ， 它 的 优 辟 是 在 增加 饱和 度 
的 同时 ， 会 防止 过 度 饱 和 而 导致 的 溢 色 。 执 行 该 命令 后 ， 会 弹出 “自然 饱和 度 ” 对 证 框 ， 
对 其 进行 相应 的 设置 ， 如 图 5-79 所 示 。 
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O 自然 饱和 度 ， 拖 动 该 选项 的 痊 块 时 ， 可 以 更 多 地 调整 图 像 中 不 饱和 的 颜色 区 域 ， 并 
在 颜色 接近 完全 饱和 时 避免 颜色 修 勇 。 

O 饱和 度 : 拖 动 该 选项 的 疹 块 时 ， 可 以 将 图 像 中 所 有 的 着 色调 整 为 相同 的 饱和 度 。 

Um 

使 用 “自然 饱和 度 ” 命 令 调 整 人 物 时 ， 要 使 调整 后 的 人 物 呈 现 自然 的 和 色彩， 防止 肤 





色 过 度 饱和 。 


7 实例 ”制作 炫 彩 展示 图 


在 进行 网 页 设计 时 ， 当 想 要 在 网 页 中 突出 某 种 色彩 ， 或 是 加 重 色 彩 效 果 ， 这 时 就 需要 使 
用 “上 自然 饱和 度 ” 和 命令 来 解决 ， 在 该 实例 中 ， 通 过 该 命令 加 重 图 像 中 权 色 的 效果 ， 使 图 像 
EMEK, 


@La 








震撼 的 3D 影 院 


震撼 的 3D 影 院 





使 用 到 的 技术 矩形 工具 、 污 点 修 
H>H [8 15 分 钟 
视频 地 址 








《1 执行 “文件 > 新 建 ”| ee 
命令 ， 设 置 如 图 5-80 所 | MINAS 
示 的 参数 。 执 行 “文件 > | 
打开 ”命令 , 打开 素材 
图 像 “素材 > 第 5 章 > | 
55401. png”， 图 像 效 果 如 : 
5-81 所 示 。 : 








eS y 
EEN 


颜色 配置 文件 : sRGB IEC61966-2.1 
REFSIL: | 方形 像素 





5-80 Fl 5-81 


— 150 0 


02 有 单 击 工具 箱 中 的 
“ 圆 角 和 矩形 工具 ”按钮 ， 
设置 圆 角 的 半径 为 3 像 
素 ， 在 画布 中 绘制 任意 颜 : 


BREA, Y 


所 示 。 单 击 图 层面 板 底部 : 
的 “添加 图 层 样式 ” 按 
S, 在 弹出 的 “图 层 样 
式 ” 对 话 框 中 选择 “ 渐 


FRI AR, 设置 如 | 


所 示 的 参数 。 


03 有 继续 选择 “投影 ”| 
选项 ， 设 置 如 所 
示 的 参数 。 单 击 “ 确 定 ”| 


按钮 ， 图 像 效 果 如 
所 示 。 


04 单 击 工具 箱 中 的 : 
“ 横 排 文字 工具 ”， 设 置 : 
如 所 示 的 参数 ， : 


在 田 布 中 输入 如 
所 示 的 文字 。 


05 用 使 用 相同 方法 完成 : 
相似 内 容 的 制作 ， 图 像 效 : 
果 如 所 示 。 将 相 : 
关 图 层 编组 ， 重 命名 为 : 
“文字 1”， 图 层面 板 如 : 


ATAR 


网 站 页 面 图 像 的 优化 与 调整 





RGB{202、 157、 0)RGB (255、 222、120) 











RRE (L) 
( 


á 0 % 
EE 
设置 为 默认 值 SNA 











WREE Reg... w Regular 


~ 14 185 
» 0 
— 


DET TAE 
RGB(61. 42. 0) 


HERA - a ER 








FULL LED Hgs EEN, 


~ 不 透明 度 : 100% ~ 
DEE : Di A BA: 100% v 
加 文字 1 


TT Learn More >> 


T 4G 新 一 伐 35 电 视 机 ... 


T Emp fx > 


FULL LED 液晶 电视 


工 
党 党 e 1 
产 . 


oo 
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由 


人 (06 使 用 相同 方法 完成 | 
“文字 2” 图 层 组 的 制作 ， 
图 像 效 果 如 图 5-90 FRA, 
图 层面 板 如 图 5-91 所 示 。 


4110 
Est 
k 


震撼 的 3D 影 院 


o 0 


e 


A MEEN 


e 


简明 便捷 的 用 户 … ÍA 


FULL LED 液晶 电视 


简明 便捷 的 用 户 男 而 


Sal EN |e 
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(9 EA 
GEELIA” HE, CE | 
布 中 绘制 任意 颜色 的 圆 角 : 
矩形， 如 图 5-92 所 示 。 | 
执行 “编辑 > 变换 路 径 > : 
扭曲 ”命令 ， 调 整 图 形 ， 
如 图 5-93 所 示 。 





5-92 5-93 


《os 执行 “文件 > 打开 ”: 
命令 ， 打开 素材 图 像 “ 素 
材 > 第 5 Æ >55401. png”, | 
将 素材 图 像 拖 吕 至 设计 文 : 
档 中 ， 并 适当 调整 大 小 和 : 
位 置 ， 图 像 效 果 如 图 5-94 ; 
所 示 。 执 行 “编辑 > 变换 | ee 
> 透视 ”人 命令， 调整 图 像 : 

如 图 5-95 所 示 。 





(09 有 执行 “图 层 > 创建 
剪贴 蒙 版 ”命令 为 图 层 创 : 
建 剪贴 蒙 版 ， 图 像 效 果 如 : 
图 5-96 所 示 。 单 击 图 层 : 
面板 底部 的 “创建 新 的 填 
充 或 调整 图 层 ” 按 钮 , 在 : 
弹出 的 子 菜单 中 选择 “ 自 
然 饮 相 度 ”选项 ， 设 置 如 : 5-96 5-97 
5-97 所 示 的 参数 。 





—o ]5? 0 





伟人 @ 便 网 站 页 而 图 像 的 优化 与 调整 


人 CO 设置 完成 后 ， 图 像 
效果 如 图 598 所 示 。 使 
用 相同 方法 完成 相似 内 容 : 
的 制作 ， 图 像 效 果 如 图 an 
99 所 示 。 


震撼 的 3 口 影院 


简明 便捷 的 用 户 男 而 





5-98 5-99 
VU 提示 
由 于 本 实例 中 的 电视 框架 是 侧面 放置 的 状态 ， 为 了 保证 图 像 的 真实 
“编辑 > 变换 > 透视 ”命令 调整 图 像 ， 使 图 像 呈 现 便 面 放置 的 状态 。 














“色相 /饱和 度 ” 命 令 可 以 调整 图 像 中 特定 颜色 范围 的 色相 、 饱 和 度 和 亮度 ， 或 者 同时 
调整 图 像 中 的 所 有 颜色 。 该 命令 尤其 适用 于 微调 CMYK 图 像 中 的 颜色 ， 以 便 它 们 处 在 输出 
设备 色 域 内 。 执 行 “图 像 > 调整 > 色相 /饱和 度 ” 命 令 ， 弹 出 “色相 /饱和 度 ” 对 话 框 ， 如 
图 5-100 所 示 。 
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U ER 
在 “色相 /饱和 度 ” 对 话 框 中 勾 选 “着 色 ” 复 选 框 后 ， 无 法 使 用 “图 像 调 整 工具 ” 
在 图 像 上 拖 动 调整 图 像 ， 在 “全 图 ”编辑 模式 下 ， 无 法 使 用 “吸管 工具 ”在 图 像 中 单 击 























“阴影 /高 光 ” 命 令 不 是 简单 使 图 像 调 亮 或 调 暗 ， 而 是 能 够 基于 阴影 或 高 光 中 的 局 部 相 
邻 像 素来 校正 每 个 像素 ， 在 调整 阴影 区 域 时 ， 对 高 光 区 域 的 影响 很 小 ， 而 调整 高 光 区 域 又 对 
骨 影 区 域 的 影响 很 小 ， 如 图 5-101 所 示 。 
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@ 阴影 
> 数量 ,用 于 调整 阴影 区 域 明暗 度 的 强 弱 ， 值 越 大 图 像 的 阴影 区 域 越 亮 ， 值 越 小 则 
阴影 区 域 越 暗 。 


> 色调 :; 可 控制 色调 修改 的 范围 ， 值 越 大 则 调整 的 阴影 区 域 越 大 ， 值 越 小 则 调整 的 
阴影 区 域 越 小 。 
> 半径 : 可 调整 每 个 像素 周围 的 局 部 相 邻 像素 的 大 小 ， 相 邻 像素 用 于 确定 像素 是 在 
阴影 中 还 是 在 高 光 中 。 
@ 高 光 
> HE: AnA PARS A AARS, MA IBA. 
> 色调 :; 可 控制 色调 的 修改 范围 ， 值 越 大 则 调整 的 高 光 区 域 越 大 ， 值 越 小 则 调整 的 


高 光 区 域 越 小 。 
> HE: 可 调整 每 个 像素 周围 的 局 部 相 邻 像素 的 大 小 。 
ES 





单 击 “ 存 储 为 默认 值 ” 按 钮 ， 可 以 将 当前 的 参数 设置 存储 为 预 设 ， 下 次 打开 该 对 话 
框 时 ， 会 自动 显示 该 参数 设置 。 按 住 Shift 键 ， 该 按钮 会 变 为 “复位 默认 值 ” 按 钮 ， 单 


击 该 按钮 ， 可 将 参数 恢复 为 默认 设置 。 


DEA “调整 网 页 中 的 着 光 图 片 


在 进行 网 页 设计 时 ， 获 取 图 像素 材 可 能 会 出 现 逆 光 拍 摄 的 问题 ， 在 网 页 设计 中 ， 尽 量 避 
免 使 用 这 类 素材 ， 如 果 需 要 使 用 ， 就 需要 使 用 “阴影 /高 光 ” 谷 令 进 行 适当 调节 ， 在 保证 效 
果 接 近 正 弟 后 再 使 用 。 
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《C13 执 行 “文件 > 新 建 ” 
命令 ， 设 置 如 图 5-102 所 
示 的 参数 。 执 行 “文件 > : 
打开 ”命令 ， 打 开 素 材 : 
图像 “素材 > 第 5 章 > | 
55601. png”， 图 像 效果 如 | 


图 5-103 所 示 。 


(1 单 击 工具 箱 中 的 : 


“ 圆 角 起 形 工具 ”按钮 ， 


设置 圆 角 的 半径 为 10 像 : 
素 ， 在 画布 中 绘制 黑色 的 : 
AAK, WE 5-104 所 : 
示 。 单 击 图 层面 概 底部 的 


ARA E] R EEN 按钮 ， 


在 弹出 的 “图 层 样式 ”对 


三 框 中 选择 “投影 ”选项 ， 


设置 如 图 5-105 所 示 的 


参数 。 


视频 \ 第 5 章 \ 调整 网 页 中 的 逆光 图 片 . mp4 


着 文 件 \ 第 


ERAF 


颜色 配置 文件 











BS 章 \ 调整 网 页 中 的 逆光 图 片 . psd 





工作 中 的 RGB: sRGB IEC619 
BERKAH: ERE 








5-102 5-103 
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《3 设置 图 层 “ 不 透明 
度 ” 为 30% ， 图 像 效果 ; 
如 图 5-106 所 示 。 单 击 工 
具 箱 中 的 “ 横 排 文字 工 
具 ” 按 钮 ， 在 画布 中 输入 
如 图 5-107 所 示 的 文字 。 





5-106 5-107 


《0o4] 单 击 图 层面 板 底 部 : 
的 “添加 图 层 样式 ” 按 : 
钮 ， 在 弹出 的 “图 层 样式 ”: 
对 话 框 中 选择 “投影 ” 选 
项 , 设置 如 图 5-108 所 示 | 
的 参数 。 使 用 相同 方法 完 : 
成 相似 文字 的 输入 ， 如 | [IE 
5-109 所 示 。 : 5-108 5-109 





Q05 有 打开 素材 图 像 “ 素 : 
材 > 第 5 Æ > 55602. png”, : 
图 像 效果 如 图 5-110 FR. | 
使 用 相同 方法 完成 相似 : 
内 容 的 制作 ， 如 图 5-111 | 
所 示 。 














图 5-110 图 5-111 


O 单 击 工具 箱 中 的 . 
“直线 工具 ”按钮 ， 设 置 ， 
线条 粗细 为 1 像素 ， 在 画 : 
布 中 绘制 白色 直线 ， 如 
图 5-112 所 示 。 使 用 相同 | 
方法 完成 相似 内 容 的 制 
作 ， 如 图 5-113 所 示 。 





图 5-112 图 5-113 
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(Desarr 
“ 圆 角 和 矩形 工具 ”按钮 ，; 
设置 圆 角 的 半径 为 5 像素 ， 
在 画布 中 绘制 RGB (44 、 
185, 255) WAAK, 
如 图 5-114 所 示 。 单 击 工 
具 箱 中 的 “ 横 排 文字 工 | 
具 ” 按 钮 ， 在 画布 中 输入 ; 


如 图 5-115 所 示 的 文字 。 


(0 将 相关 图 层 编组 ， 
重 命名 为 “文字 ”图 层 : 
面板 如 图 5-116 所 示 。 单 : 
EIRP GET: 
具 ” 按 钮 ， 在 画布 中 绘制 : 
任意 颜色 的 和 矩形， 0; 


图 5-117 所 示 。 


(09 有 执行 “编辑 > 2 


> 透视 ”命令 ， 调 整 矩 形 : 
形状 ， 如 图 5-118 所 示 。 
打开 素材 图 像 “ 素 材 > 第 : 
5 章 > 55604. png”， 图 像 : 


效果 如 图 5-119 所 示 。 


00 有 执行 “图 像 > 调整 
> 阴影 高光” 命令， 对 : 
图 像 进行 调整 ， 图 像 效果 : 
如 图 5-120 所 示 。 将 刚刚 : 
调整 好 的 图 像 拖 描 至 设计 : 
文档 中 ， 适 当 调 整 图 像 的 : 
位 置 和 大 小 ， 图 像 效 果 如 


图 5-121 所 示 。 


人 执行 “编辑 > 变 


> 透视” 命令， 调整 图 像 : 
形状 ， 如 图 5-122 所 示 。: 
执行 “图 层 > 创建 剪贴 蒙 : 
版 ”命令 为 图 层 创 建 剪贴 ; 
蒙 版 ， 图 层面 板 如 图 5-123 : 


PTA o 





GOO MAR O H 











OO 


不 透明 度 : 100% 
sf b O 自 BA: 100% 
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VU 提示 
“了 阴影/ 高光” 对话 框 中 的 “修剪 黑色 ”与 “修剪 白色 ”可 以 将 图 像 中 的 阴影 和 高 
光 剪 切 到 新 的 纯 黑 阴影 和 纯 和 白 高 光 的 颜色 ， 该 值 起 高， 图 像 对 比 度 越 强 。 





a RS a 





ERASE TA RBA, MAME, ASA UAM A, T 
以 反复 编辑 或 删除 ， 不 会 影响 原始 图 像 。 调整 图 层 可 将 颜色 和 色调 调整 应 用 于 图 像 AHR 
充 图 层 和 调整 图 层 ， 不 会 对 图 像 产 生 实 质 性 的 破坏 。 


5.6.1 纯色 填充 图 层 


通过 “纯色 ”填充 图 层 ， 是 在 所 选 图 层 上 方 建立 新 的 颜色 填充 图 层 ， 该 图 层 不 会 影响 
其 他 图 层 。 

击 图 层面 板 下 方 的 “创建 新 的 填充 或 调整 图 层 ” 按 钮 ， 在 菜单 中 选择 “纯色 ”选项 ， 
在 弹出 的 “ 拾 色 器 ”对 话 框 中 选择 颜色 ,会 在 图 层面 板 中 生成 填充 图 层 ， 如 图 5-124 
FR, 


HoT $ 
~ 不 透明 度 : 100% ~ 


Ex 
o 
fx 











创建 选区 选取 颜色 





5-124 


5.6.2 渐变 填充 图 层 
渐变 填充 图 层 与 纯色 填充 图 层 用 法 相似 ， 渐 变 填 充 也 会 自动 建立 一 个 渐变 色 图 层 ， 并 且 


— 158 6 
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可 以 对 渐变 的 颜色 、 和 角度、 不 透明 度 和 缩放 等 选项 反复 进行 设置 ， 如 所 示 。 
线性 性 渐变 径 向 渐变 角度 渐变 


加 GT 外 
”| 不 透明 度 : 100% |> 


ia 


> B5: 100% ~ 


MER] 
o 8 UN 新 变 填充 1 
| 





对 称 渐变 JE 


5.63 图 案 填充 图 层 


图 案 填 充 图 层 可 以 为 图 像 添 加 图 案 或 纹理 ， Photoshop CC2018 为 用 户 提 供 了 大 量 的 图 
案 ， 也 可 以 自 定 义 图 案 ， 并 且 可 以 通过 图 层 “ 混 合 模式 ”与 “不 透明 度 ” 等 来 调整 图 案 的 
效果 ， 如 ETT. 


A 100 ~ % 


与 图 层 链 接 {L) 
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(E) 批 处 理 


“ 批 处 理 ” 命 令 是 指 将 指定 的 动作 应 用 于 所 有 的 目标 文件 ， 从 而 实现 了 图 便 处 理 的 自动 
化 ， 可 以 简化 对 图 像 的 处 理 流程 ， 执 行 “ 文 件 > ADD > HAM” O, 弹出“ 批 处 理 ” 对 
话 框 ， 如 图 5-127 所 示 。 





批 处 理 


播放 
组 : ”点 让 动作 


材 盖 动作 中 的 "打开 "命令 {R) 
包含 所 有 子 交 件 夹 {I) 

禁止 显示 保 忻 打开 选项 对 十 框 (F) 
Haea E(P) 


e ATR mie 
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O 播放 : 用 来 设置 播放 的 组 和 动作 组 。 

01: 在 该 下 拉 列 表 中 可 以 选择 需要 进行 批 处理 的 文件 来 产 ， 分 别 是 “文件 来 ”“ 导 
MA” “打开 文件 夹 ” 和 “了 Bridge”。 

0 目标 : 用 来 指定 文件 要 存储 的 位 置 ， 在 该 下 拉 列 表 中 可 选择 “无 ”、“ 存 储 并 关闭 ” 
和 “文件 夹 ”来 设置 文件 的 存储 方式 。 






执行 “窗口 > 动作 ”命令 ， 即 可 打开 动作 面板 ， 该 面板 可 以 记 
录 、 播 放 、 编 辑 和 删除 各 个 动作 。 选 择 一 个 动作 后 ， 单 击 “ 播 放 先 
定 的 动作 ”按钮 ， 即 可 播放 该 动作 ， 如 图 5-128 所 示 。 

切换 对 话 开 / 关 :如果 记录 命令 前 显示 该 标志 ， 表 示 执行 动作 过 
程 中 会 暂停 ， 并 打开 相应 的 对 话 框 ， 这 时 可 修改 记录 命令 的 参数 ， 
单 击 “ 确 定 ”按钮 后 ， 才 能 继续 执行 后 面 的 动作 。 





El ~ 
al 
E 


y? 
v 
v 
v 
Y 
y 
v E 
y 
wl 
v 
v 
Y 
Y 





O 开始 记录 按钮 : 用 于 创建 一 个 新 的 动作 ， 处 于 记录 状态 时 ， 
该 按钮 为 红色 。 

O 播放 选 下 动作 按钮 : 选择 一 个 动作 ， 单 击 该 按钮 可 播放 该 图 5-128 
动作 。 


网 站 页 面 图 像 的 优化 与 调整 








创建 动作 首先 要 新 建 一 个 动作 组 ， 单 击 “ 创 建新 组 ”按钮 ， 弹 出 “新 建 组 ”对 话 框 ， 
在 “名 称 ” 文 本 框 中 输入 动作 组 的 名 称 ， 单 击 “ 确 定 ” 按 钮 。 单 击 “ 创 建新 动作 ”按钮 ， 
弹出 “新 建 动 作 ” 对 话 框 ， 在 该 对 话 框 中 进行 相应 的 设置 ， 然 后 单 击 “记录 ”按钮 ， 并 开 
始 进 行 录制 ， 如 图 5-129 所 示 。 





5-129 


专家 文 拍 


本 章 主 要 讲解 了 网 页 中 素材 图 像 优化 调整 的 相关 知识 。 通 过 本 章 的 学 习 ， 相 信用 户 对 网 
页 中 图 像 的 调整 有 了 一 定 的 了 解 和 掌握 。 在 设计 网 页 时 ， 遇 到 图 片 效 果 不 理想 的 时 候 ， 可 以 
先 对 图 像 进行 处 理 ， 骨 进行 网 页 设计 。 


5. 8.1 如 何 提高 图 


多 数 时 候 ， 网 页 设计 中 的 素材 图 像 达 不 到 需要 的 清晰 度 ， 因 此 在 使 用 素材 图 像 时 ， 需 要 
对 图 像 进行 处 理 。 

使 用 “ 统 化 工具 ”可 以 将 图 像 进 行 锐 化 处 理 ， 通 过 增强 像素 间 的 对 比 度 ， 从 而 提高 图 
像 的 清晰 度 。 单 击 “ 锐 化 工具 ”按钮 ， 在 选项 栏 中 进行 相应 设置 ， 涂 抹 图 像 即 可 ， 如 
5-130 所 示 。 

















5-130 
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U 提示 
也 可 执行 “ 滤 镜 > 锐 化 ”命令 ， 在 “ 锐 化 ” 子 菜单 中 包含 了 5 种 滤 镜 ， 可 使 图 像 变 








重要 处 理 扫描 图 像 ， 需 执行 “文件 > 自动 > 裁 前 并 修 齐 照 刻 ” 命 令 ， 进 行 裁剪 操作 ， 
Photoshop 会 自动 将 每 张 照片 裁 甬 成 单独 的 文件 ， 十 分 方便 快捷 。 


(s 9 总 结 扩展 


本 章 系统 介绍 了 Photoshop 中 的 各 种 基本 的 调 色 功能 ， 重 点 讲解 了 “调整 ”命令 子 菜 单 
中 各 命令 的 功能 ， 以 及 在 网 页 设计 中 的 使 用 方法 。 


本 章 主 要 介绍 使 用 Photoshop 对 网 页 图 像 进 行 修饰 与 修补 ， 了 解 色 调 的 基本 调整 、 Po 
图 层 、 调 整 图 层 以 及 图 像 批 处 理 等 知识 点 。 用 户 需要 将 各 选项 中 功能 的 概念 理 通 ， 并 能 
ABRE AA, ME A ANDE JAM 


执行 “ 批 处 理 ” 命令 进行 批 处 理 时 ， MESS 用 户 也 可 以 将 “ 批 处 理 ” 
命令 记录 到 动作 中 ， 这 样 全 pj 个 程序 合 到 一 个 动作 中 ， 从 而 一 次 性 执行 多 个 动作 。 


源 文件 地 址 . 源 文件 \ 第 5 章 \ 批 处 理 图 像 . PSD 
视频 地 址 . 视频 \ 第 5 章 \ 批 处 理 图 像 . MP4 
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1. 在 进行 “ 批 处 理 ” 前 ， 将 图 像 存 储 到 一 
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网 站 页 面 图 像 的 优化 与 调整 
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3 
“ 批 处 理 ” 对话 框 。 


4. 使 用 相同 方法 完成 图 标的 制作 ， 并 添加 相应 的 
图 层 样 式 。 








de 


LEN NES 





网 站 是 由 一 个 个 单独 的 网 页 组 成 ， 而 网 页 则 是 由 多 种 基 
本 元 素 组 成 。 这 些 基本 元 素 的 组 合 使 网 页 界面 变 得 更 加 富有 
创意 和 吸引 力 ， 也 可 以 使 网 页 界面 结构 分 明 。 本 章 将 为 用 户 
详细 讲解 网 页 界面 中 的 图 标 、 按 钮 和 LOGO 的 相关 知识 以 及 
信访 法- 。 
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61 图 标 概述 


图 标 是 在 网 页 设计 中 占 位 非常 小 的 控件 ， 但 却 是 网 页 中 的 指示 牌 ， 它 以 最 便捷 和 简单 的 
方式 去 指引 浏览 者 闫 取 其 想 要 的 信息 资源 。 图 标的 应 用 汇 围 十 分 广泛 ， 比 如 国家 的 国旗 、 军 
队 的 军旗 和 商品 的 标志 都 属于 图 标的 学 畴 ， 而 网 页 中 的 图 标 也 会 以 不 同 的 形式 出 现在 网 页 
中 ， 如 图 6-1 所 示 。 





6.1.1 什么 是 图 标 


图 标的 解释 可 分 为 广义 和 狭义 网 种 。 广 义 的 图 标 是 指 具 有 指 代 意义 的 图 形 符 号 ， 具 有 高 
度 浓 缩 并 快捷 传达 信息 、 便 于 记忆 的 特性 ， 它 应 用 光 围 很 广 ， 如 男女 出所 标志 和 和 各 种 交通 标 
志 等 。 狭 义 的 图 标 是 指 应 用 于 计算 机 软件 方 惫 ， 如 程序 标识 、 数 据 标识 、 命 令 选 择 、 模 式 信 
号 或 切换 开关 和 状态 指示 等 。 

一 个 图 标 实际 上 是 多 张 不 同 格式 的 图 厂 的 集合 体 ， 并 且 还 包 仿 了 一 定 的 透明 区 域 。 因 为 
计算 机 操作 系统 和 显示 设备 的 多 样 性 ， 导 致 了 图 标的 大 小 需要 有 多 种 格式 ， 如 图 6-2 所 示 。 


00000000968 
0090080000 
009000606000 
00000100008 
0006000000900 













VW 提示 
由 于 图 标本 身 的 优越 性 ， 几 乎 每 个 网 页 界面 上 都 会 出 现 它们 的 身影 。 图 标的 出 现 不 





仅 提 升 了 视觉 上 的 美观 程度 ， 也 提升 了 浏览 者 的 阅读 效率 。 
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6.1.2 图 标 在 网 页 中 的 作用 


图 标 是 网 页 中 不 可 或 缺 的 一 部 分 ， 在 网 页 设计 中 ， 图 标的 好 坏 在 一 定 程度 上 影响 着 网 页 
的 整体 效果 O 


要 让 浏览 者 进入 你 的 网 站 ， 必 须 提 供 一 个 让 其 进入 的 门户 。 而 LOCO 图 形 化 的 形式 ， 特 
别 是 动态 的 LOGO ， 比 文字 形式 的 链接 更 能 吸引 人 的 注意 。 在 如 今 争夺 眼球 的 时 代 ， 这 一 
TREZ, 

VW 提示 
很 多 人 喜欢 用 网 站 英文 名 的 变形 效果 作为 标志 ， 如 大 大 字 头 。 这 种 形式 具有 更 强烈 





的 现代 感 和 符号 感 ， 村 人 眼球 ， 易 于 记忆 。 


对 一 个 网 站 来 说 ， 图 标 设计 即 是 网 站 的 名 瞩 。 和 而 对 于 一 个 追求 精美 的 网 站 ， 图 标 更 是 它 
的 灵魂 ， 即 所 谓 的 “ 扩 睛 ”之 人 处。 





一 个 好 的 图 标 往往 会 反映 网 站 及 制作 者 的 某 些 信息 ， 特 别 是 对 一 个 商业 网 站 来 说 ， 浏 览 
A eA a di A 

会 突出 地 表现 出 来 。 试 想 一 下 ， 浏 览 者 要 在 大 堆 的 网 站 中 寻找 自己 想 要 的 特定 内 容 的 网 站 
一 个 能 让 人 轻易 看 出 它 所 代表 的 网 站 的 类 型 和 内 容 的 图 标 会 有 多 重要 ， 


6.1.3 网 页 图 标 应 用 
网 页 图 标 实际 就 是 以 图 像 的 方式 替代 一 个 功能 或 是 命令 ， 如 看 见 盾牌 就 会 联想 到 杀毒 软 


件 、 看 见 放 大 镜 就 会 联想 到 搜索 选项 等 。 这 样 既 避免 的 大 部 分 文字 导致 的 页 面 混乱 ,同时 也 
保证 各 个 国家 文字 不 同市 来 的 困扰 ， 如 图 6-3 所 示 。 


和 AUTOSERWIS 
è aisi 








Z| 6-3 


在 网 员 界 面 设 计 中 ， 会 根据 不 同 的 需要 来 设计 不 同类 型 的 图 标 ， 目 前 最 弟 见 的 是 用 于 导 


——— 1106 o 
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航 的 导航 图 标 ， 以 及 用 于 链接 其 他 网 页 的 友情 链接 图 标 ， 如 图 6-4 所 示 。 





6-4 


当 网 站 需要 提供 的 信息 过 多 ， 而 又 布 望都 在 网 站 前 页 上 体现 ， 除 了 导航 菜单 的 方式 以 
外 ， 还 可 以 以 内 容 的 形式 出 现 ， 将 内 容 设置 成 为 超 链 接 的 图 标 ， 既 提供 了 信息 ， 又 保证 了 界 
和 面 的 美观 性 ， 如 图 6-5 所 示 。 
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(62 使 用 形状 工具 绘制 图 标 





Photoshop 为 用 户 提 供 了 大 量 用 于 创建 形状 的 工具 ， 可 以 使 用 不 同 的 创建 工具 非常 方便 
地 在 图 像 中 创建 各 种 规则 或 不 规则 的 形状 。 其 中 规则 形状 创建 工具 主要 有 6 种 : “EIL 
具 ”“ 圆 角 丰 形 工具 ”“ 顶 圆 工 具 ”"“ 多 边 形 工具 ”“ 直 线 工 具 ” 和 “ 自 定 义 形 状 工具 ”。 


6.2.1 和 矩形 工具 


单 击 工具 箱 中 的 “和 矩形 工具 ”按钮 ， 可 以 绘制 出 和 矩形， 单 击 “ 和 矩形 工具 ”按钮 后 ,可 
以 在 选项 栏 中 设置 参数 ， 然 后 在 画布 中 单 击 拖 动 鼠标 ， 创 建 圆 角 和 矩形 ， 如 图 6-6 所 示 。 


M: 512 像 下 eo H: e E E -S 0075 
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@ 工具 模式 :“ 工 具 模式 ”下 拉 荣 单 中 分 别 有 “ 形 状 "、“ 路 径 ”和 “像素 ”3 个 选项 。 
选择 “形状 ”后 ， 可 以 使 用 指定 的 “填充 ”和 “ 描 边 ”将 形状 绘制 在 单独 的 图 层 
中 。 选 择 “ 路 径 ” 后 ， 将 只 绘制 路 径 。 选 择 “ 像 素 ” 后 ， 可 使 用 “前 景色 ”直接 在 
当前 图 层 中 绘制 像素 。 

O 填充 / 描 边 :“ 填 充 ” 和 “ 描 边 ” 仅 适用 于 “形状 ”模式 ， 用 于 指定 新 形状 的 填充 颜 
色 和 描 边 颜色 


由 提示 


“DARFEBIA”. “MALE” 和 “直线 工具 ” 的 选项 栏 与 “EPLE” 基本 相 





E, HARE 


LER “绘制 时 钟 图 标 


图 标的 设计 在 网 页 制作 中 无 颖 是 重要 的 一 部 分 ， 该 图 标 以 局 平 化 为 核心 ， 在 力求 真实 的 前 提 
下 ， 将 局 平 化 发 挥 得 淋漓 尽 致 。 界 面 将 监 色 和 绿色 进行 混搭 ， 使 图 标 况 稳 而 又 不 过 于 单调 。 





BEIR, MAILR, RETA 

25 分 钟 

视频 \ 第 6 章 \ 绘制 时 钟 图 标 . mp4 
源 文件 \ 第 6 章 \ 绘制 时 钟 图 标 . psd 








ho1 有 执行 “文件 > 新 建 ” 
命令 ， 设 置 如 图 6-7 所 示 | 
的 参数 。 复 制 “ 背 景 ”图 : 
层 ， 并 粘贴 得 到 “背景 找 : 
V AB ği “BR”: 
面板 底部 的 “添加 图 层 样 : 
式 ” 按 钮 ， 在 弹出 的 “图 : 
层 样式 ”对 话 框 中 选择 
“图 案 共 加 ”选项 ,设置 
如 图 6-8 所 示 的 参数 。 
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(002 单 击 工具 箱 中 的 
“椭圆 工具 ”按钮 ， 在 画 . 
布 中 绘制 RGB (228、i 
235, 228) 的 圆 形 ， 如 i 
2169 所 示 。 单 击 图 层面 : 
板 底部 的 “添加 图 层 样 : 
式 ” 按 钮 ， 在 弹出 的 : 
“图 层 样式 ”对 话 框 中 选 : 图 69 图 6-10 
择 “ 和 斜面 和 浮雕 ”选项 ， 

设置 如 图 6-10 所 示 的 

参数 。 


EJE «mar e 
到 “椭圆 1 STE 
图 像 效 果 如 图 6-11 所 示 。: 
单 击 工具 箱 中 的 “椭圆 工 : 
具 ” 按 钮 ， 在 画布 中 绘制 
RGB (63, 204, 222) 的 
A, 208 6-12 所 示 。 











6-11 





单 击 图 层面 板 底部 是 
的 “添加 图 层 样式 ” 按 ES 
钮 ， 在 弹出 的 “图 层 样 : 
式 ”对 话 框 中 选择 “内 阴 
影 ”选项 ， 设 置 如 图 6-13 : 
所 示 的 参数 。 继 续 选择 : = 
keg 选项 ， 设置 如 | El 6-13 图 6-14 
El 6-14 所 示 的 参数 。 











(o5) 单 击 工具 箱 中 的 
“矩形 选 框 工 具 ”， 在 画 : 
布 中 绘制 选区 ， 并 填充 
RGB (162、214、88 ) i 
图 像 效果 如 图 6-15 PRO 
执行 “图 层 > 创建 剪贴 蒙 
版 ”命令 为 图 层 创建 剪贴 : 
蒙 版 ， 图 像 效果 如 图 6-16 | 
所 示 。 





6-15 6-16 
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(06) 将 相关 图 层 编组 ， 
EMAN “RÆ”, 图 层 : 
面板 如 图 6-17 所 示 。 单 


击 工 具 箱 中 的 “ 横 排 文字 | a E >= 
> E] o AR TETT TALAT E 
工具 ”按钮 ， 在 画布 中 输 : er 


入 如 图 6-18 所 示 的 文字 。 





ko7 单 击 图 层面 板 底部 的 | 
“添加 图 层 样式 ”按钮 , 在 
弹出 的 “图 层 样式 ”对 话 | 
框 中 选择 “投影 ”选项 ， 
设置 如 图 6-19 所 示 的 参数 。 
单 击 工具 箱 中 的 “椭圆 工 : 
具 ” 按 钮 ， 在 画布 中 绘制 : 
RGB (82、84、79) 的 圆 
形 ， 如 图 6-20 所 示 。 | 
ko8] 单 击 图 层 百 板 庆 部 B 
的 “添加 图 层 样式 ” 按 | Ea 
钮 , 在 弹出 的 “图 层 样 : 医 
式 ” 对 话 框 中 选择 “和 侠 
面 和 浮雕 ”选项 ， 设 置 如 
621 所 示 的 参数 。 单 
击 工具 箱 中 的 “和 矩形 工 : 
具 ” 按 钮 ， 在 画布 中 绘制 : 
白色 矩形， 如 图 62; 
所 示 。 


和 09 有 有 单 击 图 层面 板 底 部 : 
的 “添加 图 层 样 式 ” 按 
钮 ， 在 弹出 的 “图 层 样 : 
式 ”对 话 框 中 选择 “ 斜 
面 和 浮雕 ”选项 ， 设 置 如 
623 所 示 的 参数 。 继 











0-19 0-20 











6-21 6-22 














3 “ 49 、 冬 | 6- 24A 
续 选择 “投影 ”选项 , : I 图 6 
设置 如 图 6-24 所 示 的 : 
参数。 


一 170 0 
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(10 有 使 用 相同 方法 完成 
相似 内 容 的 制作 ， 图 像 效 . 
果 如 图 625 所 示 。 单 击 
工具 箱 中 的 “矩形 工具 ”| 
按钮 ， 在 画布 中 绘制 白色 | 
和 矩形， 如 图 626 所 示 。 | 
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ki1] 单 击 图 层面 板 底部 : 
的 “添加 图 层 样式 ” 按 : 
钮 ， 在 弹出 的 “图 层 样 : 
式 ” 对 话 框 中 选择 “内 发 : 
光 ” 选 项 ,设置 如 图 6-27 | 
所 示 的 参数 。 使 用 相同 方 : 
法 完成 相似 内 容 的 制作 ，: 
图 像 效果 如 图 6-28 所 示 。 
12 了 隐藏 相关 图 层 , 执 : 











行 “ 图 像 > 裁 切 ”命令 ， : ee 

裁 掉 图 像 周 围 的 透明 像 : Eo 
R, 如 图 629 所 示 。 执 ; A 
行 “文件 > 导出 > 存储 为 : EU 
Web 所 用 格式 ”命令 , 对 EO 
图 像 进行 优化 存储 ， 如 图 : | 


6-30 所 示 。 图 6-29 图 6-30 


6.2.2 多边形 工具 


“多 边 形 工 具 ” 主 要 是 用 来 绘制 多 边 形 和 星 形 。 使 用 “多 边 形 工 具 ” 即 可 在 选项 栏 中 进 
行 设 置 。 单 击 “ 多 边 形 工具 ”选项 栏 中 的 按钮 ， 在 弹出 的 面板 中 勾 选 “ 星 形 ”选项 ， 可 以 
绘制 出 星 形 ， 如 图 6-31 所 示 。 


~| Bi doo: = 5 像素 





6-31 
o D: AMARE ILEANA. TANIA AREA, HA “2310 
形 选项 ”面板 ， 可 以 对 多 边 形 的 “半径 ”等 属性 进行 设置 。 


6.2.3 形状 的 路 径 操 作 
在 网 页 中 制作 图 形 元 素 时 ， 不 一 定 每 次 都 是 规则 的 ， 因 此 有 时 就 需要 利用 路 径 操作 来 制 


o 171 ————— 
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作 图 形 。 在 画布 中 创建 一 个 路 径 或 形状 后 ， 在 形状 工具 的 选项 栏 中 ， 打 

















开 “路径 操作 ”下 拉 列 表 ， 可 选择 相应 的 选项 。 选 择 不 同 选项 后 ， 所 绘 mares 

制 的 路 径 或 形状 都 会 有 不 同 的 效果 ， 如 图 6-32 PR, pl 
o HERE: 所 绘制 的 形状 图 形 将 是 一 个 新 的 图 层 。 Mis 
O 合并 形状 ; 在 原 有 的 形状 基础 上 添加 新 的 路 径 形状 ， 与 原 有 的 形 | Sarme 

状 合 并 为 一 个 复合 形状 。 6-32 

O 减 去 顶层 形状 ; 在 原 有 的 形状 或 路 径 中 减 去 当前 所 绘制 的 形状 或 路 径 。 
@ 与 形状 区 域 相 交 : 只 保留 原来 的 路 径 或 形状 与 当前 所 绘制 的 路 径 或 形状 的 相交 部 分 。 
O 排除 重 又 形状 : 只 保留 原来 的 路 径 或 形状 与 当前 所 绘制 的 路 径 或 形状 非 重 双 的 部 分 。 


了 7 实例 ”制作 常用 网 页 小 图 标 


在 进行 网 页 设计 时 ， 有 一 套 简 洁 的 小 图 标 可 以 使 界面 看 起 来 不 那么 单调 。 下 面 这 套 网 页 
小 图 标 制 作 简 单 而 且 精 致 ， 应 用 到 网 页 设计 中 ， 一 定 能 为 界面 增光 添彩 。 





学 习 时 间 
视频 地 址 视频 \ 第 6 DA 制作 第 用 网 页 小 图 标 . mp4 
Fo ud | 源 文 件 \ 第 6 章 \ 制作 常用 网 页 小 图 标 . psd 





人 01 有 执行 “文件 > 新 建 ”| 
命令 ,设置 如 图 6-33 所 | 


宽度 (W): 1500 








示 的 参数 。 单 击 工具 箱 中 er 
的 “ 圆 角 矩形 工具 ” 按 : IE 
钮 ,设置 圆 角 的 半径 为 4 : » 
像素 ,在 画布 中 绘制 任 : oo 





E ly ERE, 如 
6-34 所 示 。 





所 6-33 6-34 





OJ 单 击 工 具 箱 中 的 
GEIR” RH, RE 
路 径 操 作为 “ 减 去 顶层 形 : 
状 ”在 画布 中 绘制 矩形 ， 
如 图 6-35 所 示 。 使 用 相 
同方 法 完成 相似 内 容 的 制 : 


作 ， 如 图 6-36 所 示 。 


(03] 单 击 图 层面 板 底部 
的 “添加 图 层 样式 ” 按 
钮 ， 在 弹出 的 “图 层 样 ; 
式 ” 对 话 框 中 选择 “内 阴 
影 ”选项 ， 设 置 如 图 6-37; 
所 示 的 参数 。 继 续 选 择 : 
“OSI A, 设置 : 


如 图 6-38 所 示 的 参数 。 


《04] 单 击 “确定 ”按钮 ， 


图 像 效果 如 图 6-39 所 示 。: 
单 击 工具 箱 中 的 “ 圆 角 和 矩 : 
形 工具 ”按钮 ， 设 置 圆 角 : 
的 半径 为 40 像素 ， 在 画 : 
布 中 绘制 任意 颜色 的 和 矩 : 


形 ， 如 图 6-40 所 示 。 


《ca 单 击 工具 箱 中 的 
“钢笔 工具 ”按钮 ， 选 择 : 
工具 模式 为 “形状 ”， 设 
置 路 径 操作 为 “合并 形 : 
状 "， 在 画布 中 绘制 如 
图 6-41 所 示 的 形状 。 单 
击 图 层面 板 底部 的 “添加 : 
图 层 样式 ”按钮 ， 在 弹出 
的 “图 层 样式 ”对 话 框 


中 选择 “内 阴影 ”选项 ， 


设置 如 图 6- 42 所 示 的 


参数 。 
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O LI 


6-35 


6-36 




















6-37 


6-41 


6-39 





6-38 





6-40 











图 6-42 
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(006] 继续 选择 “颜色 营 
加 ”选项 ， 设 置 如 图 6-43 . 
所 示 的 参数 。 使 用 相同 方 : 
法 完成 其 他 图 形 的 制作 ， 
图 像 效 果 如 图 6-44 所 示 。 ` 


2) 


04d NA a 
D 图 o 





6-43 6-44 


6.2.4 有 目 定 义 形状 工具 


“ 自 定义 形状 工具 ”为 用 户 提 供 了 各 种 不 同类 型 的 形状 ， 方便 随时 取 用 。 单 击 工 具 箱 中 
的 “ 自 定义 形状 工具 ”， 如 图 6-45 所 示 。 在 选项 栏 中 的 “形状 ”下 拉 菜 单 中 存储 了 大 量 系 
统 提供 的 形状 。 用 户 可 根据 设计 需求 选择 形状 ， 在 国 布 中 拖 动 鼠标 ， 即 可 绘制 该 形状 的 图 
形 ， 如 图 6-46 所 示 。 


~ BA oo: 一 sE 


t AA ET E E A 
bkt trake MOI) 
aaa ARNO OOOO O EL dy a Saadi Y 
AT | ¿+ e es a eh ~- E 
eje vts 3 és Ba Eos A ur toi o 5 $ ia e 
wa LOE de O PAD KA 
ay YN A OJO) | 4 1 
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用 户 可 以 将 自己 绘制 的 形状 创建 为 自 定 义 形 状 。 选 中 自己 绘制 的 形状 ， 执 行 “编辑 
> 自 定义 形状 ”命令 ， 在 弹出 的 对 话 框 中 输入 形状 名 称 ， 单 击 “ 确 定 ” 按 钮 即 可 ， 





(RA ERASE 


ERA FMRE, EFRAIN AVE, ARRE ADA 
用 户 所 接受 。 此 款 图 标 以 青色 作为 主 色调 ， 和 白色 作为 辅 色 ， 整 体 清新 明快 ， 表 达 性 强 。 
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RETA, META, RRR 





20 分 钟 





视频 \ 第 6 章 \ 绘制 天 气 图 标 . mp4 
源 文件 \ 第 6 章 \ 绘制 天 气 图 标 . psd 





&o1 有 执行 “文件 > 新 建 ” 
命令 ， 设 置 如 图 6-47 所 : 
示 的 参数 。 单 击 工 具 箱 中 : 
的 “ 圆 角 和 珑 形 工具 ” 按 | 
钮 ， 设 置 圆 角 的 半径 为 40 : 
像素 ， 在 画布 中 绘制 RGB | 
(19, 181, 177) ETE : 


形 ， 如 图 6-48 所 示 。 


和 02 有 有 单 击 图 层面 板 底 部 : 
的 “添加 图 层 样式 ” 按 
钮 ， 在 弹出 的 “图 层 样 
式 ” 对 话 框 中 选择 “ 投 | 
影 ” 选 项 ， 设 置 如 图 6-49 : 
所 示 的 参数 。 单 击 工具 箱 ， 
中 “和 矩形 选 框 工具 ” 按 : 
钮 ， 在 画布 中 绘制 矩形 选 : 


区 ， 如 图 6-50 所 示 。 


ko3] 为 选区 填充 黑色 前 : 
景色 ， 图 像 效 果 如 图 6-51 
所 示 。 设 置 图 层 “ 不 透明 | 
度 ” 为 25% ， 执 行 “ 图 层 : 
> 创建 剪贴 莹 版” 命令， 
为 图 层 创建 剪贴 蒙 版 ,图 : 


像 效 果 如 图 6-52 所 示 。 


(04) 单 击 工具 箱 中 的 
“椭圆 工具 ”按钮 ， 在 画 
布 中 绘制 白色 圆 形 ， 如 
图 6-53 所 示 。 使 用 相同 方 : 
法 完成 其 他 内 容 的 制作 ， 


如 图 6-54 所 示 。 


色 醒 置 文件 : 工作 中 的 RGB: sRGB IEC619. 
于 长 高 比 : 方形 像素 











6-47 6-48 











6-49 6-50 





6-51 6-52 





6-53 6-54 
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人 05 有 单 击 图 层面 板 底部 
的 “添加 图 层 样式 ” 按 : 
钮 ,在 弹出 的 “图 层 样 
式 ” 对 话 框 中 选择 “ 投 : 
影 ”选项 ， 设 置 如 图 6-55 | 
所 示 的 参数 。 单 击 工具 箱 | 
中 “ 自 定义 形状 工具 ”| 
按钮 ， 在 画布 中 绘制 白色 | 


形状 ， 如 图 6-56 所 示 。 


(06 有 单 击 图 层面 板 底部 
的 “添加 图 层 样 式 ” 按 : 
钮 ,在 弹出 的 “图 层 样 : 
式 ” 对 话 框 中 选择 “ 投 
影 ” 选 项 ， 设 置 如 图 6-57 | 
所 示 的 参数 。 使 用 相同 方 : 
法 完成 相似 内 容 的 制作 ， 


如 图 6-58 所 示 。 


(praia, H 
行 “ 图 像 > 栽 切 ”命令 ， 
裁 掉 图 像 周围 的 透明 像 
素 ， 如 图 6-59 所 示 。 执 : 
行 “文件 > 导出 > 储存 为 
Web 所 用 格式 ”命令 ， 对 : 
图 像 进 行 优化 存储 ， 如 图 : 


6-60 所 示 。 


(63 mien 
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e 
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网 页 中 的 按钮 是 一 个 非常 重要 的 元 素 ， 主 要 用 来 使 用 户 跳 转 到 网 站 中 的 其 他 页 面 ， 或 者 
提供 注册 、 下 载 和 购买 等 功能 。 对 于 一 些 版 式 简 洁 、 内 容 单 一 的 页 面 来 说 ， 一 款 尊 亮 的 按钮 
能 够 使 整个 页 面 的 美观 度 大 帐 提 升 ， 从 而 达到 吸引 用 户 的 目的 ， 如 网 6-61 所 示 。 
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网 页 基本 元 素 设计 
6.3.1 网 页 中 按钮 的 常见 类 型 


网 页 中 的 按钮 是 一 个 非常 重要 的 元 素 ， 因 此 ， 按 钮 的 实用 性 和 美观 性 很 重要 。 设 计 有 特 
点 的 按钮 不 仅 能 够 增强 界面 的 美观 性 ， 还 可 以 给 浏览 者 视觉 冲击 ， 如 图 6-62 所 示 。 


: AN A pa N 
| ROZP OCZNII RINA ATESTE 
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上 提示 
按照 制作 按钮 的 技术 划分 ， 网 页 中 的 按钮 可 以 分 为 静态 图 片 按钮 、Flash 动画 按钮 和 





JavaScript 翻转 图 片 按钮 三 类 。 目 前 网 页 中 使 用 较 多 的 是 静态 按钮 和 Flash 动画 按钮 。 


静态 图 片 按 钮 就 是 将 按钮 制作 为 静态 图 片 的 效果 ， 不 带 有 任何 的 交互 效果 和 动态 效果 。 
与 普通 文字 链接 相 比较 ， 静 态 图 片 链 接 更 加 醒目 和 美观 ， 视 觉 效 果 出 众 ， 能 够 更 加 吸引 浏览 
者 ， 如 图 6-63 所 示 。 


3 8 m ed la g HOME ABOUT SERVICES PORTFOLIO BLOG CONTACT 
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网 页 中 的 Flash 37581 078 XUE—EBY, MM NP E 791 Flash 按钮 效果 。 在 潮流 的 
驱使 下 ， 设 计 师 意识 到 了 Flash 按钮 所 能 达到 的 表现 效果 和 远 远 大 于 普通 按钮 ， 特 别 是 游戏 类 
网 站 ， 如 图 6-64 所 示 。 


o 177 e 一 
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这 种 按钮 通常 是 通过 Java 语言 来 实现 的 ， 即 按钮 在 正常 状态 下 是 一 幅 图 片 ， 当 鼠标 
HEN, SERNA MEA, WE 6-65 所 示 。 


ip SERVERSIDEPRODUCTIONS™ 
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U 提示 
JavaScript 是 一 种 直译 式 脚本 语言 ， 也 是 一 种 动态 


类 型 、 弱 类 型 、 基 于 原型 的 语言 ， 
内 置 支持 类 型 。 一 


它 的 解释 器 被 称 A] JavaScript 51 a 为 zi Me va 


VE a — 广泛 用 于 和 客户 
端的 脚本 语言 ， 最 早 是 在 HTML (标准 通用 标记 


AN 
N 
语言 下 的 一 个 应 用 ) 网 页 TMAM, AMX 
给 HTML 网 页 增加 动态 功能 。 


6.3.2 网 页 中 按钮 的 特点 


随 关 网络 的 高 速 发 展 ， 网 络 传输 速度 也 飞速 发 展 ， 网 站 中 的 按钮 种 类 越 来 越 多 ， 从 而 提 
升 了 页 面 的 动态 和 美观 ， 如 图 6-66 所 示 。 


Co © * BE IEn MAFIA 
ue v $ Y : ERS MONTAR 
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按钮 主要 有 两 个 作用 ， 一 是 = 通过 提示 性 的 文本 或 图 像 提 示 浏 览 者 。 Pu 
态 啊 应 作用 ， 当 浏览 者 进行 不 同 操 作 时 ， 会 呈现 不 同 的 效果 ， 动 态 按 钮 一 般 有 四 种 状态 ， 
释放 、 经 过 、 按 下 和 按 下 时 滑动 。 从 功 和 2 上 来 说 按钮 和 文字 链接 作用 相同 ， ee 
去 访问 某 些 内 容 。 无 论 是 静态 还 是 动态 按钮 ， 都 具有 以 下 几 个 特点 。 


在 网 页 中 使 用 图 片 按 钮 比特 殊 字 体 的 按钮 更 容易 被 浏览 者 所 识别 。 随 着 Flash 动画 的 风 
靡 ， 越 来 越 多 的 网 站 使 用 了 Flash 动画 按钮 ， 这 种 按钮 更 能 吸引 浏览 者 注意 ， 使 网 页 更 易于 
操作 。 现 在 的 网 页 中 越 来 越 多 地 应 用 了 设计 精美 的 图 片 按 钮 和 Flash 按钮 ， 如 图 6-67 所 示 。 


> 一 路 相 随 


A WE 
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在 网 页 设计 过 程 中 ， 为 了 使 网 页 中 较为 重要 的 功能 或 链接 突出 出 来 ， 通 前 会 将 其 制作 成 


按钮 的 形式 ， 如 登录 和 搜索 按钮 等 ， 或 是 一 些 具 有 特殊 功能 的 按钮 。 这 些 按钮 主要 是 为 了 实 
现 功能 ， 而 不 是 装饰 ， 所 以 这 些 按钮 就 需要 有 一 定 的 可 操作 性 ， 如 图 6-68 所 示 。 


pE 型 企业 管理 系统 


terprise management system 


COMING 
SOON 


we are still working en it. 
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静态 图 片 按钮 的 表现 形式 较为 单一 ， 有 些 时 候 不 易 引 起 浏览 者 的 兴趣 和 注意 。 动 态 效果 
按钮 能 够 增强 页 面 的 动感 ， 传 达 更 丰富 的 信息 ， 可 以 突出 想 要 传达 的 内 容 ， 同 时 可 以 区 列 于 


其 他 普通 按钮 ， 如 图 6-69 所 示 。 


o 1/9 e 一 
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6.3.3 按钮 的 设计 要 点 


按钮 作为 网 页 中 非常 重要 的 组 成 部 分 ， 
素 ， 下 因为 用 户 详 细 介 绍 按 钮 的 设计 要 所。 
宝 | 


o 与 页 面 风格 协调 : 页 面 中 的 任何 一 部 分 都 不 能 割 离 出 来 单独 存在 ， 按 钮 也 是 如 此 。 
按钮 的 风格 必须 与 整体 页 面 效 果 协 调 一 致 ， 才 能 体现 出 价值 。 


EARRA MID PETER DIRE, MEAR 


O 注意 配色 : 设计 按钮 时 ， 要 尽量 做 到 文字 清晰 。 另 外 配色 应 该 简洁 鲜艳 ， 最 好 不 要 
使 用 4 种 以 上 的 颜色 ， 如 图 6-70 所 示 。 


Oo 巧妙 调整 按钮 的 形状 : 按钮 的 形状 应 该 根据 整体 页 面 颜色 的 着 重点 分 布 灵 活 调 整 ， 
如 图 6-71 Fr. 
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Wi 提示 





如 果 需 要 设计 很 长 的 按钮 ， 例 如 导航 条 ， 那 么 最 好 制作 得 纤细 一 些 ， 否 则 会 使 版 面 
大 





(RA RHES RE 


在 进行 游戏 网 站 的 网 页 设计 时 ， 设 计 一 款 个 性 且 与 界面 搭配 的 图 标 是 十 分 重要 的 ， 此 款 
— 180 O 








(01 有 执行 “文件 > 打开 ”| 
命令 ,打开 素材 图 像 “ 素 : 
材 > 第 6 章 >63301. png”, : 
图 像 效 果 如 图 6-72 所 示 。 i 
单 击 工具 箱 中 的 “ 圆 角 矩 
形 工具 ”按钮 ， 设 置 圆 角 : 
的 半径 为 60 像素 ， 在 画布 : 
中 绘制 任意 颜色 的 圆 角 甜 


形 ， 如 图 6-73 所 示 。 


(002 有 单 击 图 层面 板 底部 : 
的 “添加 图 层 样式 ” 按 
钮 ， 在 弹出 的 “图 层 样 
式 ” 对 话 框 中 选择 “ 斜 : 
面 和 浮雕 ”选项 ， 设 置 如 
E 6-74 所 示 的 参数 。 继 续 : 
选择 “内 阴影 ”选项 , 设 : 


置 如 图 6-75 所 示 的 参数 。 


(os)xsutrz za: 
加 ”选项 ， 设 置 如 图 676 | 
所 示 的 参数 。 最 后 选择 : 
“投影 ”选项 ， 设置 如 


图 6-77 所 示 的 参数 。 














鲜 O 合 ”网 页 基本 元 素 设计 


以 及 模拟 水 滴 的 效果 ， 使 图 标 极 富 质感 。 











6-73 
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人 4 单 击 “确定 ”按钮 ， 
完成 “图 层 样式 ”对 话 ; 
框 中 的 设置 ， 图 像 效 果 如 | 
6-78 所 示 。 复制“ 圆 : 
ARI” AEB “H 
AEREO BRB, 清 : 
除 图 层 样式 ， 添加 “ 投 : 
影 ”图 层 样 式 ， 设 置 如 图 : 
6-79 所 示 的 参数 。 











0-78 0-79 


ES 
如 果 需 要 删除 图 层 所 添加 的 东 种 图 层 样式 ， 可 拖 动 该 图 层 样式 名 称 至 “图 层 ” 面 板 
下 方 的 “删除 ”按钮 上 ， 即 可 删除 图 层 样式 。 








人 05 有 单 击 “ 确 定 ” 按 钮 ， 
完成 “图 层 样式 ”的 设 
置 ， 设 置 图 层 “ 填 充 ” 为 | 
0%, WE 6-80 所 示 。 使 
用 相同 方法 完成 相似 内 容 : 
的 制作 ， 如 图 6-81 所 示 。 | 





Fl 6-80 6-81 


foo), ERE; 
面板 如 图 6-82 所 示 。 单 : 
击 工具 箱 中 的 “钢笔 工 
具 ” 按 钮 ， 设 置 工具 模式 : 
为 “形状 "， 在 画布 中 绘 : 
制 如 图 6- 83 所 示 的 白色 : 
形状 。 





图 6-83 
007 有 单 击 图 层面 板 底部 : 
的 “添加 图 层 样 式 ” 按 
钮 ,在 弹出 的 “图 层 样 
式 ” 对 话 框 中 选择 “和 斜 : 
面 和 浮雕 ”选项 ， 设 置 如 : 


6-84 所 示 的 参数 。 继 续 : 
选择 “投影 ”选项 ， 设 置 ; 图 6-84 图 6-85 


























LFI IE 
如 图 6-85 所 示 的 参数 。 


一 1] 2 o 





《ca] 单 击 “ 确 定 ” 按 钮 ， 
完成 图 层 样式 的 设置 ， 设 : 
置 图 层 “ 填 充 ” 为 10% ， 
图 像 效 果 如 图 6-86 FR. | 
使 用 相同 方法 完成 相似 内 : 
容 的 制作 ， 如 图 6-87: 
所 示 。 : 


人 009 新建“ 图 层 2” 图 
层 ， 单 击 工具 箱 中 的 “ 钢 
笔 工 具 ” 按 钮 设置: 
“前 景色 ”为 白色 ,选择 : 
合适 的 笔触 和 不 透明 度 ，; 
在 画布 中 涂抹 ， 图 像 效 果 : 
如 图 6-88 所 示 。 使 用 相 : 
同方 法 完成 相似 内 容 的 制 | 
E, 图 像 效果 如 图 6-89 : 


Y 提示 





GES 
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0-80 


6-87 





6-88 


6-89 


使 用 “画笔 工具 ”可 以 绘制 出 较为 柔和 的 线条 ， 通 过 选项 栏 的 设置 ， 可 以 绘制 出 与 


真实 画笔 媲美 的 图 画 效 果 。 





(0 单 击 工具 箱 中 的 
“ 横 排 文字 工具 ”按钮 ， 
设置 如 图 690 所 示 的 参 | 
数 ， 在 画布 中 输入 RGB 
(255, 96, 0) 的 文字 ,| 
如 图 6-91 所 示 。 


Ga 单 击 图 层面 板 底部 Ë 


的 “添加 图 层 样式 ” 按 | 
钮 ， 在 弹出 的 “图 层 样 


式 ” 对 话 框 中 选择 “内 阴 i 
影 ”选项 ， 设 置 如 图 6-92 i 


所 示 的 参数 。 继 续 选择 : 
“外 发 光 ” 选 项 ， 设 置 如 : 
6-93 所 示 的 参数 。 


PT 


AER 


TÍ 24 点 


6-91 





6-92 
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(12 了 最 后 选择 “投影 ”: 
选项 ， 设 置 如 图 6-94 所 : 
示 的 参数 。 单 击 “确定 ”: 
按钮 ， 完 成 “图 层 样式 ”: 
对 话 框 的 设置 ， 设置 图 : 
层 “ 填 充 ” 为 20%， 如 
El 6-.95 所 示 。 


Ga) 将 相关 图 层 编组 ， 

重 命名 为 “进入 按钮 "， 
图 层面 板 如 图 6-96 所 示 。 i 
终 图 像 效 果 如 图 6-97 














6-95 











所 示 。 
6-96 6-97 
B E HET BY JU FS EEES 
到 层 样 式 是 图 层 中 最 重要 的 功能 之 一 ， 通 过 图 层 样 式 可 以 为 图 层 添加 描 边 、 阴 影 、 外 发 


X. FREAR, ro 从 而 使 制作 出 的 物体 更 立 
体 、 和 生动， 是 制作 按钮 和 图 标 不 可 或 缺 的 法 宝 。 


6.4.1 添加 图 层 样 式 的 方法 


ESARET 3 种 方式 为 图 层 添 加 各 种 图 层 样 式 。 

o 使 用 “图 层 > 图 层 样 式 ” 菜 单 下 的 各 种 命令 。 

Oo 单 击 图 层面 板 下 方 的 “添加 图 层 样 式 ” 按 钮 ， 在 弹出 的 菜单 中 选择 需要 的 样式 ， 如 
6-98 FR, 

Oo 直接 双击 相应 图 层 的 缩 筑 图 部 分 ， 在 弹出 的 “图 层 样式 ”对 话 框 的 堪 侧 列 表 中 选择 
需要 的 样式 ， 如 图 6-99 所 示 。 








0-98 0-99 


一 18 人 6 
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6.4.2 和 斜面 和 浮雕 


“ 笠 面 和 浮雕 ”是 最 复杂 有 的 一 种 图 层 样 式 ， 可 以 对 图 层 添 加 高 光 与 阴 影 的 各 种 组 合 ， 模 


拟 现 实生 活 中 的 各 种 浮雕 效果 ,执行 “图 层 > RRF > 笠 面 和 浮雕 ”命令 ， 即 可 打开 





参数 值 ， 如 图 6-100 所 示 。 





90 度 
使 用 全 局 光 (6) 
30 度 


消除 锯齿 (L) 
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O EX: 用 于 设置 笠 面 和 序 周 的 方式 ， 下 拉 列 表 中 包含 “外 笠 面 ”“ 内 笠 面 ”“ 浮 有 雕 
效果 ”、“ 杭 状 浮雕 ”和 “ 描 边 浮雕 ”5 个 选项 。 

0 方法 : 用 于 设置 竹 面 和 浮雕 的 显示 和 处 理 方 式 ， 包 括 “ 平 滑 ”“ 导 刻 清晰 ”和 “有 夺 
刻 柔 和 ”3 种 方式 ， 如 图 6-101 所 示 。 
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@ 深度 : ATREA BAM, ESE, MASIA E, 

0 7510: 当 设 置 为 “上 ”时 ， 将 制作 图 像 突出 效果 ; 当 设 置 为 “下 ”时 ， 将 制作 图 像 
下 陷 效 果 。 

o 角度 /高 度 : 分 别 用 于 设置 光源 照射 的 角度 和 高 度 ， 这 将 对 笠 面 和 浮雕 效果 产生 决 下 
性 的 影响 。 

@@ 光泽 等 高 线 : 用 于 设置 光泽 的 生成 算法 ， 选 用 不 同 的 等 高 线 ， 可 以 产生 不 同形 状 的 
高 光 ， 以 模拟 不 同 物体 的 质感 。 

© SRA ASA: 这 网 个 选项 用 于 设置 指定 的 高 区 和 阴影 颜色 使 用 何 种 方式 与 图 
层 颜色 混合 ， 以 产生 不 同 的 高 光阴 影 效 果 。 
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LEA “绘制 网 页 下 载 图 标 


网 页 中 的 下 载 图 标 较为 特殊 ， 阮 要 有 设计 感 ， 又 必须 保证 表意 明确 ， 计 浏 愉 者 容易 找到 
却 又 不 影响 网 页 整体 效果 。 此 款 下 载 图 标 以 蓝 色 为 主 色 调 ， 绿 色 为 辅 色 ， 图标 设计 整体 简洁 
明了 。 





使 用 到 的 技术 自 定义 形状 工具 、 椭 圆 工 具 、 图 层 样式 
+ 8] | 2044 
视频 地 址 | ”视频 \ 第 6 章 \ 绘制 网 页 下 载 图标 . mp4 
J lk 源 文 件 \ 第 6 章 \ 绘制 网 页 下 载 图 标 . psd 

















和 01 有 执行 “文件 > 新 建 ” 
命令 ， 参 数 设置 如 图 6-102 : 
所 示 。 单 击 工具 箱 中 的 
HAILA” E, de: 
画布 中 绘制 RGB (238, | 
238. 238) 的 和 矩形， 如 
图 6-103 所 示 。 








6-102 6-103 


(o2) EAS 
的 “添加 图 层 样 式 ” 按 : 
钮 ， 在 弹出 的 下 拉 列 表 
中 选择“ 内 阴影 ”和 
及 影 ” 选 项 ， 设置 如 
图 6-104 所 示 的 参数 。 设 
置 完成 后 ， 图 像 效果 如 
司 6.105 所 示 。 


66 





6-104 6-105 





人 [03 有 复制 图 层 “ 椭 圆 1”| 


得 到 “椭圆 1 N” 
层 ， 清 除 图 层 样 式 ， 更 改 
RGB (66, 249, 243), 
如 图 6-106 所 示 。 在 选项 
栏 中 选择 “ 减 去 顶层 形 
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状 ”选项 ， 继 续 绘制 李 ， 


圆 ， 如 图 6-107 所 示 。 


人 人 选择 工具 箱 中 的 : 
“和 矩形 工具 ”按钮 ， 在 画 
布 中 绘制 矩形 ， 图 像 效果 : 
如 图 6-108 所 示 ， 继 续 使 用 | 
“矩形 工具 ”在 画布 中 绘 : 


制 ， 如 图 6-109 所 示 。 


(05) 单 击 工具 箱 中 的 : 
“椭圆 工具 ”按钮 ， 在 工 
具 选 项 栏 中 选择 “合并 形 : 
状 ” 选 项 ， 在 画布 中 绘制 : 
圆 形 ， 如 图 6-110 所 示 。 
更 改 “ 路 径 操作 ”为 
“ 减 去 顶层 形状 ”， 绘 制 


如 图 6-111 所 示 的 形状 。 


CEA “HAIR” 
在 画布 中 绘制 形状 ， 单 击 : 
图 层面 板 底部 的 “添加 图 : 
层 样式 ”按钮 ， 在 弹出 的 ; 
“图 层 样 式 ” 对 话 框 中 选 : 
择 相应 选项 ， 设 置 如 图 6- 
112 所 示 的 参数 。 图 像 效 ， 


果 如 图 6-113 所 示 。 
































6-106 6-107 
6-108 6-109 
































6-110 
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(y 单 击 工具 箱 中 的 
“椭圆 工具 ”按钮 ， 在 画 
布 中 绘制 形状 。 单 击 “ 图 RE 
层 ” 面 板 底部 的 “添加 | MES LE 
图 层 样式 ”按钮 ， 在 弹出 | EE E i rar 
的 “图 层 样式 ”对 话 框 | 
中 选择 相应 选项 ， 设 置 如 : 
图 6-114 所 示 的 参数 。 | 图 6-114 图 6-115 
像 效果 如 图 6-115 所 示 。 
和 08 有 使 用 之 前 的 “合并 : 
形状 ”和 “ 减 去 顶层 形 : 
状 ” 结 合 的 操作 方法 绘制 ， 
HA? RE, RRX : 
果 如 图 6-116 所 示 。 单 击 : 
工具 箱 中 的 “ 圆 角 和 珑 形 工 
具 ” 按 钮 ， 在 画布 中 绘制 : 
形状 ， 如 图 6-117 所 示 。 ` 图 6-116 图 6-117 








和 09 有 复制 形状 ,使 用 快 : 
捷 键 Cal +T 调 出 定 界 框 ， 
调整 形状 的 角度 和 大 小 ， 
如 图 6-118 所 示 。 使 用 相 : 
同方 法 完成 相似 内 容 操 : 
作 ， 图 像 效 果 如 图 6-119 | 
所 示 。 





| 6-119 
00 隐藏 相关 图 层 ， 执 E) y 
LA 一 66 、 9 : 基于 === i 
T “RIR > RY] Tn | O 适 明 像素 (A) = | E) | e) 


裁 掉 图 像 周 围 的 透明 像 Eraras 
R, WR 6-120 所 示 。 执 TAO 
行 “文件 > 导出 > 存储 为 : 
Web 所 用 格式 ”命令 ， 对 
图 像 进行 优化 存储 ， 如 
图 6-121 所 示 。 

































































6-120 6-121 
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6.4.3 拍 边 


“ 措 边 ”样式 用 于 为 形状 和 图 层 添 加 描 边 ， 是 一 个 非常 简单 实用 的 样式 。 用 户 可 执行 
“图 层 > 图 层 样式 > 描 边 ”命令 ， 弹 出 “图 层 样式 ”对 话 框 ， 选 中 “ 描 边 ”选项 ， 然 后 在 
右 侧 参数 区 设置 描 边 大 小 、 颜 色 和 不 透明 度 等 属性 ， 如 图 6-122 所 示 。 





取消 


FEP (W)... 
预览 (V) 


ARA BRAMA 
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Wi 提示 
对 于 形状 图 层 来 说 ,使 用 “选项 ” 栏 中 的 “ 描 边 ”和 “ 描 边 ” 图 层 样式 都 可 以 为 
其 添加 描 边 效果 。 两 者 的 区 别 是 “ 描 边 ”选项 可 以 设置 描 边 样式 ， 如 虚线 ,“ 描 边 ” 图 





层 样 式 可 以 设置 “不 透明 度 ” 和 “混合 模式 ”。 


6.4.4 内 阴影 和 投影 


“内 阴影 ”与 “投影 ”的 选项 设置 方式 基本 相同 。 不 同 之 处 在 于 “投影 ”是 图 层 对 象 
背后 产生 的 阴影 ， 而 “内 阴影 ” 则 是 通过 “阻塞 ”选项 来 控制 的 。 


“内 阴影 ”效果 是 在 紧 靠 图 层 内 容 的 边缘 内 添加 阴影 ， 使 图 层 产 生 凹 陷 效 果 。 阴 影 效果 
在 网 页 设计 中 的 使 用 非常 频繁 。 执 行 “图 层 > 图 层 样 式 > 内 阴影 ”命令 ， 在 弹出 的 “图 层 
样式 ”对 话 框 中 适当 设置 各 项 参数 ， 如 图 6-123 所 示 。 


a: 新 建 样式 {W). 
E D 使 用 全 局 光 (G) 预览 (WW 


品质 


HB (NW): @ 


设 年 为 默认 值 CARE 
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上 提示 
E 内 阴影 ” 样式 包 





“投影 ”是 最 简单 的 图 层 样 式 ， 它 可 以 创造 出 日 党 生活 中 物体 投影 欠 nic 使 其 产 
生 立 体感 。 执 行 “ 图 层 > 图 层 样 式 > 投影” 命令， 为 图 像 添 加 投影 效果 ,“ 投 影 ” 对 话 框 如 
图 6-124 所 示 。 





确定 


投影 

结构 

Ratt: ERRA 
HERE á iio oi 新 建 样式 (W).. 


取消 


度 EREA (G) (v) 


RE (O 
EAN E 
pan 图 层 控 空 投影 (U) 
引发 光 设置 为 默认 值 FARA 
ER 
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6.4.5 内 发 光 和 外 发 光 


制作 发 区 的 文字 或 是 物体 效果 是 网 页 设计 中 经 常会 用 到 的 。“ 内 发 光 ” 和 “外 发 光 ” 样 
式 可 以 为 形状 添加 向 内 和 向 外 发 散 的 发 光 效 果 。 pi “内 发 区” 或 “外 发 光 ” 样 式 ， 
请 先 选 中 相应 图 层 ， 然 后 执行 “图 层 > REIR > 内 发 沧 / 外 发 光 ” 人 命令， 在 弹出 的 “图 层 
样式 ”对 话 框 中 适当 设置 各 项 参数 ， 如 图 6-125 所 示 。 


新 建 样式 {W). 
预览 (V) 


设置 为 默认 值 复位 为 默认 值 











6-125 
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应 用 “光泽 ”图 层 样式 可 以 创造 常规 的 彩色 波纹 ， 在 图 层 内 部 根据 图 层 的 形状 应 用 阴 
影 ， i 泽 效 果 。 该 样式 可 通过 选择 不 同 的 “等 高 线 ” 来 改变 光泽 的 样式 。 
“光泽 ”对 话 框 如 图 6-126 所 示 。 





RST: ERSA 
MEE (O â 


角度 人 N 


中 高 ({[ â 
大 小 


y > o mamao 


RAAR NE BINAE 
FeZ 
HEEE 
ERZ 
ES 








3] 6-126 
6.4.7 WEZI., HEZ Im RR h 


OSO. AMADO E ERE TUNA MENTE. ME 
e. 并 且 可 以 对 不 透明 上 度 、 方 向 和 大 小 等 效果 进行 设置 。 若 要 应 用 “颜色 垣 加 ”、 
“渐变 于 加 ”或 “图 案 革 加 ”样式 ， 先 选中 相应 图 层 ， 然 后 执行 “图 层 > 图 层 样式 > MES 
加 /渐变 革 加 /图 案 车 加 ”命令 ， 在 弹出 的 “图 层 样 式 ” 对 话 杠 中 适当 设置 各 项 人 参数， 如 
26-127 所 示 为 渐变 靶 加 和 图 案 革 加 的 设置 面板 。 


RAAN 
HEF 
0 
E 02] 
内 阴影 
A 


O jez 


FED 

EREN 
INE 
Ek 
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QRA ”制作 手 游 开始 按钮 


手 游 按 钮 的 制作 与 网 页 按钮 略 有 不 同 ， 由 于 手机 主要 靠 手 指 进行 操作 ， 因 此 按钮 的 尺寸 
和 放置 的 位 置 需要 认真 思考 。 此 款 按 钮 以 绿色 作为 主 色 调 ， 整 体 效 果 立 体感 十 足 。 


eo 191 —————— 
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辐 角 矩 形 工具 、 横 排 文字 工具 、 图 层 样式 

视频 地 址 视频 \ 第 6 章 \ 制作 手 游 开始 按钮 . mp4 
源 文件 \ 第 6 章 \ 制作 手 游 开 始 按钮 . psd 
CDan aore” | 
命令 ， 设 置 如 图 6-128 所 | 
示 的 参数 。 打 开 两 张 素材 
图 像 ， 使 用 “移动 工具 ” 


将 素材 图 像 拖 入 到 设计 文 : 
档 中 ， 如 图 6-129 所 示 。 | 












6-129 


人 002 单 击 工具 箱 中 的 
“EKIRA” RH, EE 
布 中 绘制 RGB (58, 154, : 
54) 的 矩形 ， 如 图 6-130 | 
所 示 。 单 击 工具 箱 中 的 | 
“转换 点 工具 ”按钮 ， 调 . 
整 矩形 左上 角 点 的 方向 : 
线 ， 如 图 6-131 所 示 。 图 6-130 图 6-131 


人 03 使 用 相同 方法 完成 
相似 内 容 操 作 ， 如 图 6-132 : 
所 示 。 单 击 工具 箱 中 的 : 
“钢笔 工具 ”按钮 ， 在 画 ; 
布 中 绘制 RGB (241, ; 
191, 152) 的 形状 如 | 
图 6-133 所 示 。 





6-132 6-133 


-1O2 o 





ko4j 打 开 素 材 图 像 ， 将 
其 拖 入 到 设计 文档 中 ， 
打开 字符 面板 设置 如 
图 6-134 所 示 的 参数 。 使 
用 “ 横 排 文字 工具 ”在 
画布 中 输入 相应 文字 , 使 
用 快捷 键 Cul +T 调 出 定 : 
界 框 调整 文字 角度 ， 如 


6-135 所 示 。 


《5 继续 打开 字符 面板 ， 
设置 如 图 6-136 所 示 的 参 : 
数 。 使 用 “ 横 排 文字 工 
具 ” 在 画布 中 输入 相应 文 : 
F, 使 用 快捷 键 Cal + TO 
调 出 定 界 框 调整 文字 角 


度 ， 如 图 6-137 所 示 。 


ko6 有 使 用 “钢笔 工具 ” 
在 画布 中 绘制 形状 ， 图 像 | 
效果 如 图 6-138 所 示 。 继 : 
续 使 用 “钢笔 工具 ”在 画 : 
布 中 绘制 形状 ， 如 图 6-139 | 


PR 


(07) 2 BARRA 
相似 内 容 操作 ， 形 状 效 果 : 
如 图 6-140 所 示 。 继 续 使 : 
用 相同 方法 完成 形状 的 绘 : 


制 ， 如 图 6-141 所 示 。 


《ca 打开 字符 面板 , 设 
置 如 图 6-142 所 示 的 参 
数 。 使 用 “ 横 排 文字 工 : 
具 ” 在 画布 中 输入 相应 文 ， 
F, 使 用 快捷 键 Cal +T i 
调 出 定 界 框 调整 文字 角 : 


度 ， 如 图 6-143 所 示 。 
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和 09 有 打开 字符 面板 ， 设 : 
置 如 图 6-144 所 示 的 参 
数 。 使 用 “ 横 排 文字 工 
具 ” 在 画布 中 输入 相应 文 : 
F, 使 用 快捷 键 Cal + Ti 
调 出 定 界 框 调整 文字 角 | 


度 ， 如 图 6-145 所 示 。 


ti0j 打 开 一 张 素材 图 像 ， 
将 其 移动 到 设计 文档 中 。 
单 击 “面板 ”底部 的 : 
“创建 新 的 填充 或 调整 图 . 
层 ” 按 钮 ， 在 弹出 的 属性 : 
面板 中 设置 如 图 6-146 所 | 
示 的 参数 。 使 用 相同 方法 : 
完成 相似 内 容 操作 ， 图 像 


效果 如 图 6-147 所 示 。 


11 单 击 工具 箱 中 的 
BERTA” ÈH, 
设置 形状 渐变 颜色 如 
图 6-148 所 示 。 单 击 图 层 : 
面板 底部 的 “添加 图 层 样 
式 ” 按 钮 ， 在 弹出 的 下 拉 : 
列表 中 选择 “内 阴影 ” 
选项 ， 参 数 设 置 如 图 6- 


149 所 示 。 


(02 打开 字符 面板 设置 : 
如 图 6-150 所 示 的 参数 ， 
使 用 “ 横 排 文字 工具 ” 
在 画布 中 输入 相应 文字 。: 
为 文字 添加 “ 描 边 ”图 : 
ERA, 图 像 效 果 如 


6-151 所 示 。 
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LOGO 概述 


LOGO 是 微 标 或 者 商标 的 英文 说 法 ， 用 于 标识 身份 的 小 型 视觉 设计 ， 多 为 各 种 组 织 和 商 
业 机 构 所 使 用 。 起 到 对 公司 的 识别 和 推广 的 作用 ， 通 过 形象 的 LOGCO， 了 可 以 让 消费 者 记 住 公 
司 主体 和 品牌 文化 。 网 络 中 的 LOGO 微 标 主要 是 各 个 网 站 用 来 与 其 他 网 站 链接 的 图 形 标志 ， 
代表 一 个 网 站 或 网 站 的 一 个 板块 ， 如 图 6-152 所 示 。 
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6.5.1 LOGO 作用 


在 网 络 日 益 发 展 的 今天 ，LOGO 作为 识别 网 页 的 一 种 标志 ， 在 网 页 中 起 到 不 可 替代 的 作 
用 ， 也 越 来 越 被 设计 师 重 视 起 来 。 

O RSE 

随 着 社会 经 济 的 发 展 和 人 们 审美 心理 的 变化 ，LOG0O 设计 日 益 趋 向 多 元 化 、 个 性 化 ， 新 
材料 、 新 工艺 的 应 用 ， 以 及 数字 化 、 网 络 化 的 实现 ， 标 志 设 计 在 更 广阔 的 视觉 领域 内 起 到 了 
宣传 和 树立 品牌 的 作用 。 

O 保证 信誉 

品牌 产品 以 质 取信 ， 商 标 是 信誉 的 保证 ， 给 人 以 诚信 之 感 ， 通 过 LOGO ， 可 以 更 迅速 、 
准确 地 识别 判断 商品 的 质量 高 低 。 

CESA 

优秀 的 LOGO RADIER, MEA, ETRA, N AA A EE NE 
用 ， 利 于 在 众多 的 商品 中 脱身 而 出 ， 如 图 6-153 所 示 。 
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6. 5.2 LOGO 特性 


在 网 络 日 益 发 达 的 今天 ，LOGO 的 设计 也 得 到 了 发 展 ，LOGO 出 现在 网 页 上 时 ， 需 要 注 
AMATIR IE, 


O 识别 性 : 要 求 必须 容易 识别 ， 易 记忆 。 这 就 要 做 到 无 论 是 从 色彩 还 是 构图 上 ， 
要 讲究 简单 。 

O 特异 性 ， 所谓 特 异性 就 是 要 与 其 他 的 LOGO 有 区 别 ， 要 有 自己 的 特性 ， 否 则 设计 的 
LOGO 都 一 样 。 


O 内 涵 性 : 设计 LOCO 一 定 要 有 它 自身 的 含义 ， 人 否则 就 算 做 得 再 污 亮 ， 再 完美 也 只 是 
形式 上 的 漂亮 ， 却 没有 一 氮 意义 。 这 就 要 求 LOGO 必须 有 自己 的 象征 意义 。 

O 法 律 意 识 : ÁT LOGO 的 法 律 意识 ,一 定 要 注意 敏感 的 字样 、 形 状 和 语言 。 

O 结构 性 : LOGO 不 同 的 结构 会 给 人 不 同 的 心理 意识 ， 就 像 水 平 线 给 人 的 感觉 是 平缓 、 
RE, ESTAR, EXA MARES, EL, HAIFA, REA 
张 或 收缩 ， 容 易 引 起 人 的 注意 等 。 

O 色彩 性 :; 色彩 是 形态 三 个 基本 要 素 之 一 ，LOGO 常用 的 颜色 为 三 原色 ,这 三 种 颜色 
纯度 比较 高 ， 比 较 亮 丽 ， 更 容易 吸引 人 的 眼球 。 


6.5.3 网 站 LOGO 表现 形式 


pig LOGO， 为 了 在 最 有 效 的 空间 内 实现 所 有 的 视 竞 识别 功能 ， 一 般 是 
通过 特定 图 案 及 特定 文字 的 组 合 ， 达 到 对 被 标识 体 的 出 示 、 说 明 、 沟 通 和 交流 从 而 引导 受 
perio 达到 增强 美誉 和 记忆 等 目的 。 

表现 形式 的 组 合 方式 一 般 分 为 特定 图 案 、 特 定 字体 和 合成 字体 。 





特定 图 案 属 于 表象 符号 ， 独 特 、 醒 目 、 图 案 本 身 易 被 区 分 和 记忆 ， 通 过 隐喻 、 联 想 、 概 
插 、 抽 象 等 绘画 表现 方法 表现 被 标识 体 ， 对 其 理念 的 表达 概括 而 形象 ， 但 与 被 标识 体 关 联 性 
不 够 直接 ， 受 众 容易 记忆 图 案 本 身 ， 但 对 被 标识 体 关 系 的 认 知 需要 相对 比较 曲折 的 过 程 ， 但 
一 旦 建立 联系 ， 印 象 比 较 深 刻 ， 对 被 标识 体 记忆 相对 持久 ， 如 图 6-154 所 示 。 
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的 记忆 ， 从 而 对 被 标识 体 的 长 久 记 忆 发 生 弱 化 ， 如 图 6-155 所 示 。 





6-155 


结合 的 设计 ， 兼 具 文 字 与 图 案 的 属性 ， 


合成 文字 是 一 种 表象 表意 的 综合 ， 指 文字 与 图 案 结 合 
Poems gz 啊 力 相对 弱化 ， 为 了 不 同 的 对 象 取 同 ， 制 作 偏 图 案 或 偏 文 字 的 LO- 


会 在 表达 时 产生 较 大 的 差 寞 。 如 只 对 印刷 字体 做 简单 修饰 ， 或 把 文字 变 成 一 种 六 饰 造 
让 大 家 去 猜 ， 如 图 6-156 Fi, 
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(以 实例 ”绘制 影视 网 站 LOGO 


网 站 的 LOGO ， 主 要 通过 文字 的 变形 处 理 ， 体 现 影 视 网 站 的 特点 。 通 


本 实例 是 一 款 影 视 隐 
光影 的 质感 ， 使 LOGO 更 具有 立体 感 和 质感 。 


过 对 文字 添加 高 光 的 效果 ， 体 现 
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矩形 工具 、 椭 圆 工 具 、 横 排 文字 工具 


35 分 钟 








视频 \ 第 6 章 \ 绘制 影视 网 站 LOGO. mp4 
产 文 件 \ 第 6 章 \ 绘制 影视 网 站 LOGO. psd 





(1 执行 “文件 > 新 建 ”; 
命令 ,设置 如 图 6-157 所 示 
的 参数 。 单 击 工具 箱 中 的 : 
“ 横 排 文字 工具 ”按钮 ， 在 
画布 中 输入 如 图 6-158 所 示 : E 

的 文字 。 








6-157 6-158 
ko2] 使 用 相同 方法 完成 : 
相似 内 容 的 制作 ， 图 像 效 
果 如 图 6-159 所 示 。 单 击 : 
工具 箱 中 “和 矩形 工具 ”: 
按钮 ， 在 画布 中 绘制 白色 | 
矩形， 如 图 6-160 所 示 。 ` 





i 6-159 6-160 
(O : 
似 内 容 的 制作 ， 如 图 6-161 | 
MT AF PEIR”, ， 
在 选项 栏 上 设置 “工具 模 ; 
式 ”为 “形状 ”， 在 画布 中 
绘制 白色 形状 ， 如 图 6-162 : 
所 示 。 : 





和 04 有 为 该 图 层 添加 图 层 : 
面板 ,使 用 “渐变 工具 ”| 


在 蒙 版 中 填充 黑白 渐变 ， 
设置 该 图 层 “ 填 充 ” 为 : 
50% ， 如 图 6-163 所 示 。 ` 


6-161 6-162 
使 用 相同 方法 完成 相似 : 


内 容 的 制作 ， 如 图 6-164 


Fr, 6-163 6-164 








(05) 将 相关 图 层 编组 ， 
重 命名 为 “TA”， 单 击 工 . 
具 箱 中 的 “椭圆 工具 ”: 
按钮 ， 在 画布 中 绘制 RGB | 
(1, 23, 94) 的 正 圆 形 ， 
如 图 6-165 所 示 。 单 击 图 : 
层面 板 底部 的 “添加 图 层 : 
样式 ”按钮 ,在 弹出 的 | 
“图 层 样式 ”对 话 框 中 选 : 


E FED” AMA, HEM: 


6-166 所 示 的 参数。 


和 06 有 单 击 工具 箱 中 的 
“椭圆 工具 ”按钮 ， 在 画 
布 中 绘制 白色 正 圆 形 , 如 
6-167 所 示 。 单 击 图 层 | 
面板 底部 的 “添加 图 层 样 
式 ” 按 钮 ， 在 弹出 的 “图 : 
层 样式 ”对 话 框 中 选择 
“内 阴影 ”选项 ， 设 置 如 | 


6-168 所 示 的 参数 。 


《7 继续 选择 “内 发 光 ” 
选项 ， 设 置 如 图 6-169 所 示 | 
的 参数 。 使 用 相同 方法 完 : 
成 相似 内 容 的 制作 ， 如 


6-170 所 示 。 


和 08 有 将 相关 图 层 编组 ， 重 | 
命名 为 “影片 "， 单 击 工具 
箱 中 的 “ 横 排 文字 工具 ”| 
在 画布 中 输入 如 图 6-171 所 : 
示 的 文字 。 单 击 工 具 箱 中 
O SERIA” HEN, E! 
画布 中 绘制 RGB (1, 23. | 
94) 的 和 矩形， 如同 6-172 


PT, 
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和 09 有 使 用 相同 方法 完成 : 
相似 内 容 的 制作 ， 图 像 效 : 
果 如 图 6-173 所 示 。 复 制 : 
“lgo” HRA, EA 
翻转 图 形 ， 为 图 层 添 加 : 
图 层面 板 ， 并 填充 “黑白 : 
线性 渐变 "， 如 图 6-174 | 
所 示 。 图 6-173 图 6-174 


专家 文 招 


通过 本 章 的 学 习 ， 相 信用 户 对 网 页 中 的 图 标 、 按 钮 和 LOGO 有 了 一 定 的 认识 和 了 解 ， 方 
便 在 日 后 学 习 、 工 作 中 活 学 活用 。 


6.6.1 图 标的 文件 格式 是 什么 


在 Windows 操作 系统 中 ， 单 个 图 标的 文件 名 后 缀 是 . ICO。 这 种 格式 的 图 标 可 以 在 Win- 
dows 操作 系统 中 直接 浏览 。 在 Windows 中 的 图 标 文 件 (*.ico) 使 用 类 似 BMP 文件 格式 的 
结构 来 保存 ， 但 它 的 文件 头 包 含 了 更 多 的 信息 ， 以 指出 文件 中 含有 多 少 个 图 标 文件 ， 以 及 相 
关 的 信息 ， 另 外 在 每 个 图 标的 数据 区 中 ， 还 包含 有 透明 区 的 设置 信息 ， 对 于 图 像 信 息 数 据 的 
组 织 ， 则 与 BMP 相同 ， 这 是 一 种 无 损 的 图 像 。 


6.6.2 LOGO 的 设计 流程 是 什么 
O 调研 分 析 一 一 依据 企业 的 构成 结构 、 行 业 类 别 、 经 营 理 念 ， 并 充分 考虑 标志 接触 的 


对 象 和 应 用 环境 ， 为 企业 制定 的 标准 视 郊 条 号。 
o 要 素 挖 掘 一 一 依据 对 调查 结果 的 分 析 ， 提 炼 出 标志 的 结构 类 型 、 色 彩 取向 ， 列 出 标 
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taodianying.com 












志 所 要 体现 的 精神 和 特点 ， 挖 掘 相关 的 图 形 元 素 ， 找 出 标志 的 设计 方向 ， 使 设计 工 
作 有 的 放 矢 。 


O 设计 开发 一 一 有 了 对 企业 的 全 面 了 解 和 对 设计 要 素 的 充分 掌握 ， 可 以 从 不 同 的 角度 
和 方向 进行 设计 开发 工作 。 

O 标志 修正 一 一 提案 阶段 确定 的 标志 ， 经 过 对 标志 的 标准 制图 、 大 小 修正 、 黑 白 应 用 、 
线条 应 用 等 不 同 表现 形式 的 修正 ， 使 标志 时 加 规 荡 。 


总 结 扩展 


本 章 系统 介绍 了 网 页 基本 图 形 的 制作 ， 通 过 本 章 的 学 习 和 实例 的 制作 ， 相 信用 户 可 以 对 
基本 图 形 的 制作 有 一 定 的 了 解 。 
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6.7.1 本 章 小 结 


对 于 网 页 设计 而 言 ， 基 本 图 形 的 绘制 是 网 页 界面 设计 的 基础 ， 图 形 元 素 的 创意 和 设计 在 
网 页 设计 中 占有 很 高 的 价值 性 和 艺术 性 ， 而 不 仅仅 是 传递 信息 。 通 过 本 章 学 习 ， 希 望 用 户 能 
够 理解 图 形 元 素 的 创意 设计 方法 ， 设 计 出 精美 的 图 形 元 素 。 
6.7.2 举一反三 简约 网 页 按钮 


按钮 的 简洁 或 复杂 取决 于 网 页 界面 ， 一 般 作 为 企业 网 页 界面 ， 多 采用 简洁 的 网 页 按钮 ， 
以 表现 企业 的 严谨 和 专业 。 此 款 按 钮 以 白色 作为 主 色 调 ， 辅 色 用 到 了 黄色 ， 整 体 界 面 立体 性 
十 足 ， 很 容易 搭配 企业 类 网 页 界面 。 
源 文件 地 址 : 源 文 件 \ 第 6 章 \ 简约 网 页 按钮 . PSD 
视频 地 址 : 视频 \ 第 6 草 \ 简约 网 页 按钮 . MP4 





确定 
取消 


TIAS)... 


颜色 模式 


颜色 配置 文件 : sRGB IEC61966-2.1 


ESA: ， 方 形 像素 


1. 执行 “文件 > 新 建 ”命令 ， 新 建 一 个 设计 2 使 用 “椭圆 工具 ”绘制 正 圆 形 ， 并 添加 相应 


图 层 样式 。 


4. 使 用 “ 圆 角 和 矩形 工具 ”和 “ 横 排 文字 工具 ” 


3. 使 用 相同 方法 完成 相似 内 容 的 制作 。 ASE, FORMAL ERA. 








导航 条 是 网 站 设计 中 不 可 或 缺 的 元 素 之 一 ， 它 是 网 站 信 
息 结构 的 基础 分 类 ， 也 是 浏览 者 的 指 路 灯 。 本 草 将 向 用 户 详 
细 介 绍 网 站 导航 设计 的 相关 知识 ， 并 以 实例 的 形式 向 用 户 介 
绍 网 站 导航 的 设计 方法 。 


网 站 导航 设计 








CD 网 站 导 册 概述 


导航 条 是 网 页 设计 中 不 可 缺少 的 部 分 ， 它 是 指 通过 一 定 的 扩 术 手段 ， 为 网 站 的 访问 者 提 
供 一 定 的 途径 ， 全 其 可 以 帮 便 地 访问 到 所 需 的 内 容 ， 使 人 们 浏览 网 站 时 可 以 快速 从 一 个 页 面 
转 到 男 一 个 页 面 的 快速 通道 。 利 用 导航 条 ， 用 户 就 可 以 快速 找到 想 要 浏览 的 页 面 ， 如 图 7-1 
所 示 。 


Winter 
HOME PROJECTS ABOUT WebSite PORTFOLIO BLOG CONTACT 
WWE 


HOME PROJECTS ABOUT PORTFOLIO BLOG CONTACT Qa 


la 


© 网 站 导 山 的 作用 


网 页 中 导航 条 的 主要 作用 就 是 帮助 用 户 找 到 需要 的 信息 ， 可 以 概括 为 以 下 3 个 方面 。 

@ 引导 页 面 路 转 : 网 站 页 血 中 各 种 形式 与 类 型 的 导航 和 菜单 都 是 为 了 帮助 用 户 蝎 方便 
地 跳 转 到 不 同 的 页 面 。 

O 定位 用 户 的 位 置 ， 导航 和 菜单 还 可 以 帮助 用 户 识别 当前 页 面 与 网 站 整体 内 容 的 关系 ， 
以 及 当前 页 面 与 其 他 页 面 之 间 的 关系 。 

O 理 清 内 容 与 链接 的 关系 : 网 站 的 导航 和 菜单 是 对 网 站 整体 内 容 的 一 个 索引 和 高 度 概 
括 ， 它 们 的 功能 就 像 书本 的 目录 ， 可 以 帮助 用 户 快 速 找到 相关 的 内 容 和 信息 。 


(7 3 丙丁 肌 的 设计 标准 


导航 是 网 页 中 非常 重要 的 引导 性 元 素 ， 可 以 从 利用 率 、 实 现 度 、 符 合 性 和 有 效 性 4 个 方 
面 来 评估 一 款 导航 设计 是 人 否 足 够 优秀 。 
@ 利用 率 : 浏 览 者 通过 导航 功能 浏 贤 不 同 页 面 的 次 数 越 多 ， 说 明 导 航 的 利用 率 赵 高 。 
OIE: 用 户 使 用 导航 功能 时 ， 能 够 通过 氮 击 导 航 中 的 链接 ， 进 行 了 下 一 步 操 作 所 
占 的 比例 。 
e FS: 用 户 使 用 导航 后 的 停留 时 间 和 任务 完成 度 ， 可 以 用 来 衡量 导航 的 符合 度 。 











e 205 一 


Photoshop 网 站 UI 设计 y a 


页 面 的 平均 停留 时 间 越 得， 任务 完成 度 越 高 ， 则 导航 的 符合 性 走高 。 
@ 有 有效 性 : 可 以 用 页 面 平 均 停 留 时 间 来 衡量 导航 的 有 效 性 。 用 户 在 每 个 页 面 停留 的 时 
间 越 短 ， 说 明 导 航 的 功能 越 有 效 ， 有 效 性 越 高 。 


网 由 守山 形式 





一 个 优秀 的 网 页 页 面 能 够 通过 使 用 导航 帮助 用 户 访 问 网 站 内 容 。 导 航 的 形式 种 类 很 多 ， 
在 网 员 中 较为 弟 用 的 形式 有 标签 形式 、 按 钮 形式 、 弹 出 荣 单 形式 、 无 边框 形式 、PFlash 形式 
和 多 导航 系统 形 陈 。 


在 一 些 图 片 比 例 较 大 、 文 字 信 息 量 小 且 网 页 风格 比较 简单 的 网 页 中 ， 标 签 形式 按钮 较为 
常用 ， 如 图 7-2 所 示 。 
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按钮 形式 的 导航 是 最 为 原始 ， 也 是 最 容易 让 浏览 者 理解 为 单 击 含义 的 导航 形式 。 按 钮 可 
以 制作 成 为 规则 或 不 规则 的 精致 美观 外 形 ， 以 引导 用 户 更 好 地 使 用 ， 如 图 7-3 所 示 。 
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网 站 导航 设计 
7.4.3 弹出 菜单 形式 


由 于 网 页 的 空间 有 限 ， 为 了 能 够 万 省 页 和 面 的 空 


El, MXA 
A, AEREI y Ea ARES AN, ME 


多 响 网 页 导航 更 好 地 发 挥 其 作 
x] 7-4 所 示 。 








sb ur a 
SAMPLE WITH LIf 





CHECK OUT PHOTOS 





HERE'S YOUR TITLE 











7.4.4 无 边框 形式 


MERA SER ME, ESPIAR AREA SÍ, TEMA 
界面 设计 中 ， 这 种 导航 可 以 给 人 轻松 的 自由 感 ， 如 图 7-$ 所 示 。 


e EA 
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7.4.5 Flash 形式 


EA ES A ARA NADAR A TEA, SARA A ANTE A E E 
e 目前 很 多 网 页 上 使 用 了 Flash 形式 的 导航 ， 如 图 7-6 所 示 。 但 是 


由 于 Flash 本 身 的 一 些 缺 
A, EHIMLS 技术 日 益 成 熟 的 今天 ， 会 越 来 越 少 使 用 。 
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a 用 于 内 容 较 多 的 网 页 中 ， 导 航 内 部 可 以 采用 多 种 形式 进行 表现 ， 以 下 
页 效果 。 每 个 导航 的 作用 各 不 相同 ， 不 存在 任何 的 从 属 关 系 ， 如 图 7-7 所 示 。 
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LEA ”绘制 汉堡 包 网 站 导航 条 


本 实例 是 一 款 汉 堡 包 网 站 首页 导航 条 ， 以 红色 为 主 色 调 ， 辅 色 用 到 了 黄色 和 标 色 ， 导 航 
栏 通 过 发 光 效 果 突 出 主题 ， 既 突出 了 导航 ， 又 不 影响 整体 界面 效果 ， 简 单 却 不 失 亏 术 感 。 


6 7897 











使 用 到 的 技术 





END 网 站 导航 设计 


层 样 式 、 窍 形 工 具 、 模 排 文字 工具 





学 习 时 间 


25 分 钟 





视频 地 址 
产 文 件 地 址 


(0 执行 “文件 > 打开 ”: 
命令 ， 打开 素材 图 像 “ 素 
材 > 第 7 章 >74601. png” , | 
图 像 效果 如 图 7-8 所 示 。 


单 击 工具 箱 中 的 “和 矩形 工 


具 ” 按 钮 ， 在 画布 中 绘制 
填充 为 渐变 红色 的 窍 形 ， 


如 图 7-9 所 示 。 


《0o3] 单 击 图 层面 板 底部 : 
的 “添加 图 层 样式 ” 按 
钮 ， 在 弹出 的 “图 层 样 : 
式 ” 对 话 框 中 选择 “ 投 : 
影 ” 选 项 ， 设 置 如 图 7-10 : 
所 示 的 参数 。 设 置 完成 
后 ， 图 像 效 果 如 图 7-11 


所 示 。 


Cdra 


“GBETA” 324, EE 
布 中 绘制 RGB (254, 


01 、7) 的 和 矩形， 图像 效 


果 如 图 7:12 所 示 。 


单 击 图 层面 板 底部 的 “ 添 
加 图 层 样式 ”按钮 ， 在 


弹出 的 “图 层 样 式 ” 


eii “投影 ” 选 : 
设置 如 图 7-13 所 示 | 


视频 \ 第 7 E 






Maa 


ddd 











GRILLED CHICKEN 


BURGUR 


Lorem psum dolor st amet, consecietur adipising elit Sed eges- 
a a | 
AA A E 
accunaas gaža dlirpaan pe, hendreri w sisl Morbs al 


purus in arna facilisir wenenaeis. 











7-10 7-11 














7-12 7-13 


Photoshop 网 站 UI 设计 e y a 


04 设置 完成 后 ， 单 击 : 
“确定 ”按钮 ， 图 像 效 果 : 
如 图 7-15 所 示 。 
捷 键 Chl + R 在 画布 中 调 : 
出 标尺 ， 使 用 “移动 工 
具 ” 从 标尺 中 拖 出 参考 线 ， 
到 画布 中 ， 如 图 7-14 i 
所 示 : 图 7-14 E 7-15 

















Ctrl + 7% | 
大 图 像 到 可 以 看 见 单个 像 
素 为 止 ， 使 用 “和 矩形 工 : 
具 ” 在 画布 中 绘制 宽 为 1 
像素 的 矩形 ， 如 图 7-16 : 
所 示 。 继 续 使 用 “矩形 工 
具 ” 绘 制 形 状 ， 如 图 7-17 | 
所 示 。 | 7-16 ¡Dv 





PEP F = 
ATA 





《co6 使 用 相同 方法 完成 
相似 内 容 的 制作 ， 如 图 7- : 
18 所 示 。 打 开 字 符 面板 ， 
设置 各 项 参数 ， 如 图 7-19 | 






E 
GRILLED CHICKEN 


所 ZJN 6 meie E e tetur adipiscing elit. Sed eges- 









Maecenas a ante lorem, non rutrum magna. In eros 
AR T hendrerit ut nisl. Morbi at ip: 








rel pretium ante. Maec n lec cl 
Nunc co ey a in urna facilisis venenatis, a disse justo ` 
eS a on egestas ac, ullame dde Po hen- 
ctetur 












risque enim, nec elementum Ea 
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007 有 单 击 工具 箱 中 的 
“ 模 排 文字 工具 ”按钮 ， 
在 画布 中 输入 相应 的 文字 ， 


GRILLED CHICKEN 





1 
I 
如 图 7-20 所 示 。 继 续 使 用 : BURGUR 
1 
O 一 1 
1 
i rem ipsum dolor sit amet, consectetur adipiscing el 
774 99 IN E me E 
— I cenas a lorem, non rul eros 
息 形 工具 ”在 男 布 中 绘 : We 
Tibero, vel pretium ante Maca 
Nunc consequat purus in urna facilisi: 
En n egestas ac, ullamcorper congue velit. Cras heri- 


drerit scelerisque enim, nec elementum quam consectetur in. 





$] RGB (61, 0, 5) 和 
RGB (255, 202, 8) fJ% : 
形 ， 如 图 7-21 所 示 。 : 图 7-20 R7 
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(00) 单 击 图 层面 板 底部 : 
的 “添加 图 层 样式 ” 按 
钮 ， 在 弹出 的 下 拉 列 表 中 : 
选择 “内 发 光 ” 选 项 ， 
设置 效果 如 图 7-22 所 示 
的 参数 。 设 置 完成 后 , 使 
用 相同 方法 完成 相似 内 容 : 
操作 ， 图 像 效果 如 图 7-23 : 图 7-22 7-23 
所 示 。 


Wi 提示 
通过 “投影 ”和 “内 发 光 ” 等 图 层 样 式 ， 可 以 为 各 种 形状 添加 各 种 角度 和 各 种 

















DAKAR, 并 且 可 以 对 有 登 加 效果 的 不 透明 度 、 方 向 和 大 小 进行 设置 。 


WA ub -S ANU 4 





网 站 导航 如 同 启 明灯 ， 为 浏览 者 的 顺畅 阅读 提供 据 引 。 将 网 站 导航 放置 在 网 页 中 的 哪个 
位 置 ， 是 网 页 设计 师 必 须 考 虑 的 问题 。 
751 顶部 导航 

顶部 导航 就 是 指 网 站 导航 位 置 处 于 网 页 的 顶部， 当时 网 页 技术 不 发 达 ， 受 浏览 器 属性 的 
影响 ， 馆 常情 况 下 在 下 载 网 页 相关 信息 时 ， 都 是 按照 从 上 往 下 的 顺序 进行 加 载 的 ， 因 此 将 导 
航 设 置 在 了 网 页 项 部。 虽然 现在 网 络 发 这， 但 由 于 此 种 导航 符合 人 们 长 期 以 来 的 习惯 ， 因 此 
仍旧 盛行 ， 如 图 7-24 所 示 。 








7-24 


底部 导航 就 是 指 网 站 导航 位 置 处 于 网 页 的 底部 ， 由 于 受 显 示 辟 大 小 的 限制 ， 位 于 网 页 底 
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部 的 导航 并 不 会 全 部 显示 出 来 ， 除 非 用 户 的 显示 蕴 中 够 大 ， 或 网 页 的 内 容 十 分 有 限 。 有 时 为 
了 追求 更 加 多 梓 化 的 网 页 页 和 面 布局 形式 ， 网 页 设计 师 就 采用 此 种 网 页 布局 ， 将 导航 固定 在 页 
面 底部 ， 如 图 7-25 所 示 。 
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左 侧 导航 就 是 指 网 站 导航 位 置 处 于 网 页 的 左 侧 ， 它 比较 符合 人 们 的 视觉 习惯 ， 即 从 左 到 
右 的 浏览 习惯 。 为 了 使 网 页 导航 更 加 醒目 ， 更 方便 用 户 对 页 面 的 了 解 ， 可 以 采用 不 规则 图 形 
对 导航 形态 进行 设计 ， 如 图 7-26 所 示 。 
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U 提示 
在 进行 左 侧 导 航 设计 时 ， 应 时 刻 考虑 整个 界面 的 协调 性 ， 采 用 不 同 的 设计 方法 可 以 





设计 出 不 同 风格 的 导航 效果 。 


v 实例 “绘制 网 站 左 侧 导航 


本 实例 是 一 款 网 站 的 左 侧 导 航 栏 ， 此 款 界 面 运用 了 折纸 的 效果 ， 既 贯彻 了 扁平 化 的 流行 
风格 ， 又 有 立体 感 ， 主 色 用 到 了 蓝 色 ， 辅 色 用 到 了 和 白色 ， 导 航 设计 整体 简洁 而 富有 艺术 性 。 
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视频 地 址 
产 文 件 地 址 


《co1 执 行 “ 文 件 > 打 开 ”: 
命令 ， 打 开 素 材 图 像 “ 素 : 
材 > 第 7 章 >75301. png”, ` 
图 像 效 果 如 图 7-27 所 示 。 : 
SHIA PH “EI: 
具 ” 按 钮 ， 在 画布 中 绘制 


和 矩形 ， 如 图 7-28 所 示 。 


《o23 执 行 “ 编 辑 > 变 


> 斜 切 ”命令 调整 图 形 ， 
图 像 效 果 如 图 7-29 FR, | 
单 击 工具 箱 中 的 “钢笔 工 | 
R” RA, AFIR 
模式 ”为 “形状 ， 在 画 
布 中 绘制 如 图 7-30 所 示 | 


的 形状 。 


《Ca 使 用 相同 方法 完成 
相似 内 容 的 制作 ， 图 像 效 : 
果 如 图 7-31 所 示 。 单 击 : 
工具 箱 中 “ 横 排 文 字 工 
具 ” 按 钮 ， 在 画布 中 输入 | 


如 图 7-32 所 示 的 文字 。 
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图 层 样式 EIR, HEI 
25 分 钟 


Del 
lo 
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《3 执行 “编辑 > 自由 


变换 ”命令 调整 文字 , E; 
像 效 果 如 图 7-33 所 示 。 TA ia 
FEARED AE AAA | BUS 
字 的 输入 ,如 图 7-34 pt 
PR, = E 


回 到 顶部 





7-33 7-34 








(06 有 单 击 工 具 箱 中 的 F 

SERIA” RH, tE ”ee 完 启 
124156327, 20: f 
图 7-35 所 示 。 羊 击 图 层面 | Mila 
板 底 部 的 “添加 图 层 样 | MS 
>» 过 帖 图 党 
a H, 弹 出 的 时 尚 达 人 

图 层 样 式 ” 对 话 框 中 选 : 
树 “ 内 阴影 ”选项 设 图 7-35 图 7-36 


置 如 图 7-36 所 示 的 参数 。 


使 用 相同 方法 完成 / a, ll 
相似 内 容 的 制作 ,如 图 7- A E Es de 万 


















245% : 123456 





示 。 单 看 工具 箱 中 的 | G 

37 所 不 。 PLA | bz 20572 : MS GO 

TRIR sa ra PA 

布 中 绘制 RGB (1, 85. : i 人 T RKE 

、 爱 家 妙招 

149) 的 直线 ， 如 图 7-38 | 关于 我 们 we 

所 示 : 回 到 顶部 1% 1% de HE HE 
7-37 7-38 

008) 继 缮 使 用 “直线 工 TELLIK 
i F HAAS: 100% 

H” ; 在 国 布 中 绘 ] RGB i E > Aa: 100% 


(3. 129. 19) 的 直线 ， 本 站 编号 : 123456 > “加 E 


形状 6 
如 图 7-39 所 示 。 将 相关 | A ar 
| 搜集 号 : 0 G e 


图 层 编组 ， 重 命名 为 | 
“分 割 线 "， 图 层面 板 如 zug BE. 
E mawi f 


E 7-40 所 示 。 i 
1% 1% de HE E o MEEM 


KO Q@ 可 品位 
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(O SARR 
相似 内 容 的 制作 ， 图 像 效 
果 如 图 7-41 所 示 ， 图 层 : 
面板 如 图 7-42 所 示 。 | SEEE] 
帖 图 党 

时 尚 达 人 


爱 家 妙招 
关于 我 们 


m” e a UD? 
MAHE: 100% 





回 到 顶部 
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右 侧 导 航 就 是 指 网 站 导航 位 置 处 于 网 页 的 右 侧 ， 随 看 网 络 技 术 的 高 速 发 展 ， 将 导航 栏 放 
置 在 页 面 右 侧 也 逐渐 流行 起 来 。 由 于 不 符合 人 们 的 视觉 习惯 ， 因 此 使 用 率 较 低 ， 不 过 也 是 一 
种 新 闲 的 风格 ， 可 以 尝试 ， 如 图 7-43 所 示 。 


< 


$ ” 
E - -7 T PPA 
Good aa 区 day! Heinz) 
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中 心 导航 就 是 指 网 站 导航 位 置 处 于 网 页 的 中 间 ， 主 要 目的 是 为 了 强调 ,并非 为 了 廊 省 空 
间 。 将 导航 放置 在 页 和 面 中 心 位 置 ， 有 利于 浏览 者 浏览 网 页 内 容 ， 同 时 可 以 增加 页 面 新 鲜 感 ， 
如 图 7-44 所 示 。 


nPOny 
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Go) 网 站 设计 的 辅助 操作 


网 页 设计 不 同 于 其 他 类 型 的 设计 ， 网 页 页 面 中 各 个 元 素 的 大 小 、 颜 色 ， 应 用 的 特殊 效果 
和 排列 方式 都 对 最 终 成 品 有 着 决定 性 的 影响 。 

在 使 用 Photoshop 进行 静态 页 面 制作 时 ， 使 用 参考 线 辅助 对 齐 是 必要 的 操作 ， 下 面 就 对 
这 些 辅助 功能 进行 简单 介绍 。 
761 标尺 的 使 用 

执行 “视图 > 标尺 ”命令 ， 或 按 快捷 键 Ctl + R， 即 可 在 文档 窗口 的 上 方 和 左 侧 各 显示 
出 一 条 标尺 。 用 户 可 以 使 用 “移动 工具 ”从 水 平 标尺 中 拖 出 水 平 参考 线 ， 从 垂直 标尺 中 拖 
出 垂直 参考 线 ， 如 图 7-45 所 示 。 














U 提示 
拖 出 参考 线 之 后 ， 用 户 仍 然 可 以 移动 位 置 。 只 需 使 用 “移动 工具 ” 移 近 参 考 线 ， 拖 
动 参考 线 至 其 他 位 置 即 可 。 






除了 从 标尺 中 自由 拖 出 参考 线 之 外 ， 用 户 还 可 以 执行 “视图 > 新 建 参 考 线 ”命令 ， 弹 
出 “新 建 人 参考 线 ” 对 话 框 ， 在 该 对 话 框 中 设置 人 参考 线 的 “取向 ”和 具体 的 “位 置 "， 以 在 
文档 中 创建 一 条 精确 的 参考 线 ， 如 图 7-46 所 示 。 











EP): 10/85 
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VW 提示 
用 户 也 可 以 执行 “视图 > 显示 > 智能 参考 线 ; 千 能 参考 线 ， 这 样 在 鼠标 经 
过 文档 、 形 状 、 图 像 的 边界 和 中 心 时 ， 就 会 自动 显示 生 考 线 ， 以 辅助 对 齐 物 体 。 








上 提示 
在 操作 过 程 中 ， 如 果 觉 得 参考 线 对 视觉 查看 造成 障碍 ， 可 以 执行 “试图 > 显示 额外 
内 容 ” 命 令 ， 或 者 按 快捷 键 Ctrl + H 将 其 临时 隐藏 。 再 次 执行 相同 的 操作 即 可 重新 显示 





参考 线 。 


QA “绘制 精 至 导航 条 


本 实例 是 一 款 精 致 的 导航 条 ， 以 黑色 为 主 色 调 ， 辅 色 用 到 了 和 白色， 此 款 导 航 栏 设计 简 
洁 ， 通 过 投影 和 内 阴影 的 效果 突出 导航 部 分 ， 体 现 出 导航 的 立体 感 ， 结 构 虽 然 简单 ， 但 效果 
Kio 


\ 


使 用 到 的 技术 图 层 样式 、 和 矩形 工具 、 横 排 文 字 工 具 





学 习 时 间 
视频 地 址 
源 文件 地 址 

















《ci 执行 “文件 > 新 建 ” 
命令 ， 设 置 如 图 7-47 所 : 
示 的 参数 。 复 制 “ 背 景 ”| 
图 层 ， 并 粘贴 得 到 “背景 es 
拷贝 ”图 层 。 单 击 图 层面 EA 
板 底部 的 “添加 图 层 样 IO i 
R” Jk, EAH H i 
“图 层 样式 ”对 话 框 中 选 | 
择 “ 内 阴影 ”选项 , 设 
置 如 图 7-48 所 示 的 参数 。 
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dais «mes: 
加 ”选项 ,设置 如 图 7-49 | 
所 示 的 参数 。 单 击 工具 箱 : 
中 的 “ 圆 角 和 珑 形 工具 ”| 
按钮 ， 设 置 圆 角 半径 为 ， 
40 像素 ， 在 画布 中 绘制 | 
任意 颜色 的 圆 角 和 矩形 ,如 ， 
图 7-50 所 示 。 
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O 单 击 图 层面 板 底部 
的 “添加 图 层 样 式 ” 按 
钮 ， 在 弹出 的 “图 层 样 
式 ” 对 话 框 中 选择 “内 阴 : 
影 ”选项 ,设置 如 图 7-51 
所 示 的 参数 。 继 续 选 择 : 
“渐变 二 加 ”选项 ,设置 图 7-51 图 7-52 
如 图 7-52 所 示 的 参数 。 











(继续 选择 “投影 ”: 
选项 ， 设 置 如 图 7-53 所 | 
示 的 参数 。 使 用 相同 方法 : 
完成 相似 内 容 的 制作 ， 图 : 
像 效 果 如 图 7-54 所 示 。 | 
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(005 有 执行 “视图 > 标尺 ” 
命令 ,使 用 “移动 工具 ”| 
从 水 平 标尺 中 拖 出 水 平 参 : 
考 线 ， 从 垂直 标尺 中 拖 出 
垂直 参考 线 ， 如 图 7-55 


所 示 。 单 击 工具 箱 中 的 
“矩形 工具 ”按钮 ， 在 画 


布 中 绘制 任意 颜色 的 窍 : 
形 ， 如 图 7-56 所 示 。 
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人 (06 有 单 击 图 层面 板 底部 : 
的 “添加 图 层 样式 ” 按 : 
钮 ,在 弹出 的 “图 层 样 : 
式 ” 对 话 框 中 选择 “内 
阴影 ”选项 设置 如 | 
7-57 所 示 的 参数 。 继 续 : 
AR ED MR, 
设置 如 图 7-58 所 示 的 | 


《KG 动 单 击 工具 箱 中 的 : 
“ 横 排 文字 工具 ”按钮 ， 
在 画布 中 输入 如 图 7-59 | 
所 示 的 文字 。 使 用 相同 方 | 
法 完成 相似 内 容 的 输入 ， 


图 像 效 果 如 图 7-60 所 示 。 


(0 单 击 工具 箱 中 的 
“ 圆 角 和 矩形 工具 ”按钮 ， 
设置 圆 角 半 径 为 4 像素 ， 
在 画布 中 绘制 RGB (13, 
13、13) WAAK, 如 
图 7-61 所 示 。 单 击 图 层 : 
面板 底部 的 “添加 图 层 样 : 
式 ” 按 钮 ,在 弹出 的 
“图 层 样式 ”对 话 框 中 选 | 
择 相应 的 选项 ,设置 如 


图 7-62 所 示 的 参数 。 


《c9 使 用 相同 方法 完成 
相似 内 容 的 制作 ， 图 像 效 ， 
果 如 图 7-63 所 示 。 单 击 
工具 箱 中 的 “直线 工具 ” 
按钮 ， 在 画布 中 绘制 RGB : 
黑色 直线 ， 如 图 7- 64 


所 示 。 


DOS 网 站 导航 设计 
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7-59 7-60 








7-61 7-62 
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Coas IEH “BRI : PE 
具 ” ， 在 画布 中 绘制 RGB | A a E 
(81. 81. 81) 的 直线 ， : i 

如 图 7-65 所 示 。 将 相关 | E ir 

图 层 编 组 ， 重 命名 为 “分 : E 


213%”, EEE | LE 
7-66 所 示 。 | 效果 





7-65 7-66 


1 有 使 用 相同 方法 完成 : 
相似 内 容 的 制作 ， 图 像 效 : 
果 如 图 7-67 所 示 ， 图 层 
面板 如 图 7-68 所 示 。 | 
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专家 文 拍 





网 站 中 使 用 的 导航 最 好 不 要 过 于 复杂 ， 设计 应 当 尽 量 直 观 一 些 ， 计 浏 席 者 很 容易 可 以 看 
明白 ， 这 才 是 最 好 的 效果 。 如 何 保证 清晰 直 白 的 同时 ， 又 能 引起 浏览 者 的 兴趣 ， 这 就 需要 设 
计 师 目 己 掌 握 了 


O 


E E ES E RRA ENEE, 
LASER DEMAS ITE EAER. MAAIE, TUE RENA RA 


O 大 屏 中 的 导航 菜单 不 要 太 小 。 
O 把 导航 菜单 放 在 用 户 束 悉 的 位 置 。 
O 让 荣 单 链接 看 起 来 有 互动 感 。 
O 确保 导航 菜单 拥有 足够 的 视觉 吸引 力 。 
O 有 亲 单 选项 的 颜色 要 与 网 站 背景 色 对 比 鲜明 。 


6210 o 





网 站 导航 设计 


一 个 导航 设计 得 是 否 成 功 ， 最 基本 的 标准 就 是 用 户 可 以 通过 导航 了 解 到 自己 所 处 于 网 站 
的 哪个 位 置 。 设 计 师 在 设计 导航 条 时 ， 通 各 会 把 选中 的 菜单 选项 外 观 稍 做 改动 ， 以 区 别 于 其 
他 选项 ， 这 桩 可 以 帮助 用 户 快 速 、 便 捷 地 知道 自己 在 网 站 的 具体 位 置 。 





O 使 用 通俗 易 懂 的 文字 链接 标签 。 

O 链接 标签 要 与 链接 内 容 一 致 。 

O 对 于 大 型 网 站 来 说 ， 让 用 户 通 过 导航 菜单 预览 子 级 内 容 。 
O 为 息息相关 的 内 容 提 供 本 地 导航 。 

O 利用 视觉 的 传达 力 。 


O 有 薪 单 选项 要 够 大 、 方 便 氮 击 。 

O 确保 下 拉 某 单 不 会 太 大 或 太 小 。 

O 当 页 面 内 容 很 多 时 ， 可 以 考虑 使 用 悬浮 豚 项 (或 固 展 ) HE, 
O 尺 可 能 编 短 导航 菜单 最 前 用 的 物理 距离 。 


交互 式 动 态 导航 可 以 为 用 户 市 来 新 鲜 感 和 愉 居 感 ， 但 它 并 不 是 简单 的 鼠标 移动 效果 ， 尽 
管 交 互 式 导 航 有 许多 自身 优势 ， 但 不 可 忽略 的 是 导航 存在 的 意义 是 实用 性 强 。 在 网 页 中 采用 
交互 式 动 态 导 航 需要 用 户 束 悉 、 了 解 和 学 习 其 具体 使 用 方法 ， 人 否则 用 户 可 能 在 使 用 过 程 中 不 
能 很 快 找 到 隐藏 的 导航 ， 也 就 看 不 到 相应 内 容 ， 从 而 降低 用 户 体验 。 因 此 ， 要 求 设计 者 在 设 
计 交 互 式 导航 的 同时 ， 要 有 诱 寻 用 户 人 参与 交互 的 操作 。 


7.8 总 结 扩展 


本 章 主 要 介绍 一 些 用 于 制作 网 站 导航 的 知识 氮 ， 厦 望 用 户 通 过 本 章 的 学 习 ， 可 以 对 网 页 
导航 的 制作 有 一 定 的 心得 体会 。 

作为 一 名 优秀 的 网 页 界面 设计 师 ， 应 当 充 分 认识 到 导航 条 的 设计 精 艇 ， 那 就 是 直观 、 简 
单 、 明 了 和 和 新 帘 。 只 有 方便 用 户 的 导航 设计 才 是 好 的 设计 。 用 户 通 过 本 章 内 容 的 学 习 ， 要 理 
解 网 站 导航 设计 的 方法 ， 通 过 实例 的 练习 ， 逐 步 提 高 网 员 导 航 设 计 水 平 。 


本 实例 制作 了 一 款 游戏 网 的 导航 栏 ， 这 款 导 航 是 直接 “ 般 ” 在 网 页 育 景 中 的 ， 所 以 将 
Banner 也 一 并 制作 了。 在 制作 过 程 中 使 用 画笔 拍 边 路 人 径 功能 略微 强化 了 一 下 导航 边 绿 ， 使 
其 更 有 质感 。 
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源 文件 地 址 . 源 文 件 \ 第 7 章 \ 制作 游戏 网 站 导航 栏 . PSD 
视频 地 址 . 视频 \ 第 7 章 \ 制作 游戏 网 站 导航 栏 . MP4 


1. 新 建 画 布 并 将 素材 “背景 图 ”导入 文档 中 , 2 使 用 “直线 工具 ” 
使 用 钢笔 工具 勾 出 导航 栏 轮廓 并 添加 效果 。 ; 输入 相关 文字 。 





的 制作 。 


-CO0 e 





$ 


告 设计 





网 由 


网 页 作为 一 种 全 新 的 ， 并 逐渐 为 大 众 所 熟 悉 和 接受 的 媒 
体 ， 正 在 逐步 向 大 众 显 示 其 独 有 的 、 深 厚 的 广告 价值 。 本 章 
主要 为 用 户 介 绍 有 关 网 页 中 广告 设计 的 相关 知识 ， 并 通过 实 
例 的 制作 ， 使 用 户 掌握 网 页 中 的 广告 设计 表现 方法 。 


IN 网 站 UI 设计 第 2 版 ———————-jyj III — 


(ODE 页 广告 条 概述 


网 页 中 的 广告 条 就 是 指 网 幅 广 告 、 旗 帜 广告 、 横 幅 广 告 (网 络 广告 的 主要 形式 一 般 使 
用 JPG、PNG 和 GIF 格式 的 图 像 文件 ，JPC 和 PNG 格式 的 图 像 是 静态 图 形 ，CIF 格式 的 图 像 
为 小 动画 )， 如 图 8-1 所 示 。 








计算 机 痛 广 告 种 类 丰富 多 彩 ， 其 中 包括 模 帐 广告、 按钮 广告 、 通 栏 、 文 字 链 接 、 直 邮 广 
告 、 游 标 、 弹 窗 、 男 中 男 、 全 屏 收缩 和 对 联 广 告 


横幅 广告 (Baner) 是 最 早 的 网 络 广告 形式 ， 以 GIF, JPG, SWF 等 格式 建立 的 图 像 文 
件 ， 定 位 在 网 页 站 页 、 频 道 和 子 频 道 竺 各 级 页 加 或 文本 页 面 的 最 上 方 ， 浏 览 者 将 最 先 注意 到 
这 个 位 置 的 广告 。 它 同时 还 可 使 用 Java 等 语言 使 其 产生 交互 性 ， 如 图 8-2 所 示 。 


Golden Dutterfly face 


来 目 UA E J EME > 
E 


OGC HERAWARŻE 





页 面 。 表 现形 式 小 巧 ， 费 用 相对 较 低 ， 它 同 


按钮 广告 发 布 在 首页 、 频 道 、 了 频道 等 各 
pie 性 ， 用 Flash 等 增强 表现 力 ， 如 图 8-3 所 示 。 


Banner 广告 一 样 ， 可 使 用 Java 等 语言 使 


一 CO 0 
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通栏 广告 出 现在 首页 、 新 闻 中 心 和 大 的 频道 ， 视 觉 冲 击 力 较 强 ,能 引起 浏览 者 的 注意 
Ee DR, E, PA 
以 SWF 文件 格式 为 主 ， 如 图 8-4 所 示 。 


J 
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文本 链接 广告 是 一 种 对 浏览 者 干扰 最 少 ， 但 却 很 有 效果 的 网 络 广告 形式 。 整 个 网 络 广告 
界 都 在 寻找 新 的 宽带 广告 形式 ， 而 有 时 候 ， 最 小 带宽 、 最 简单 的 广告 形式 poi 同时 
个 绝妙 的 文字 创意 可 以 吸引 许多 浏览 者 的 眼球 ， 如 图 8-$ 所 示 。 
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电子 邮件 是 网 民 经 常 使 用 的 因特网 工具 。 电 子 邮件 广告 分 为 直 邮 广告 、 邮 件 注脚 广告 。 
直 邮 广告 一 般 采 用 文本 格式 或 html 格式 。 就 是 把 一 段 广告 性 的 文字 或 网 页 放 在 E-mail 中 间 ， 
发 送 给 用 户 。 邮 件 注脚 广告 是 在 邮件 注脚 处 添加 一 条 广告 ， 链 接 到 广告 主公 司 主页 或 提供 产 
品 或 服务 的 特定 页 面 。 





游标 广告 出 现在 新 闻 中 心 和 各 频道 首页 中 ， 默 认 跟 随 浏 览 器 右 侧 滚动 条 的 移动 ， 其 表现 
形式 灵活 ， 能 极 大 地 满足 广告 主 宣 传 自己 形象 的 需要 。 大 小 为 90 x90 像素 ， 可 以 采用 SWF、 
GIF. JPG 等 文件 格式 。 





弹出 窗口 广告 发 布 在 网 站 首页 、 新 闻 中 心 或 各 频道 首页 ， 在 页 面 出 现 的 同时 弹出 ， 经 剖 
可 以 吸引 来 访 看 点 击 ， 以 及 让 来 访 者 和 留 下 深刻 的 印象 。 大 小 为 250 x 190 像素 ， 可 以 采用 
SWF, GIF, JPG 等 文件 格式 。 


男 中 国 广 告发 布 在 新 闻 文 本 中 ， 和 面积 较 大 ， 表 现 内 容 也 较为 丰富 。 往 往 会 在 浏览 者 浏览 
网 页 的 同时 引起 其 注意 。 大 小 为 200 x200 像素 ， 适 合 采 用 SWF 文件 格式 。 


全 屏 收缩 广告 发 布 在 新 闻 中 心 和 新 闻 频 道 首页 ， 打 开 浏 览 页 面 后 ， 全 屏 展示 广告 画面 ， 
逐渐 回 缩 至 消失 或 回 缩 到 一 个 固定 广告 位 〈 横 幅 广告 或 者 按钮 广告 ) 。 是 一 种 新 型 的 广告 形 
式 ， 具 有 很 强 的 表现 力 。 





对 联 广告 形 如 一 付 对 联 ， 惹 挂 于 首页 两 侧 ， 规 格 为 90 x250 像素 ， 不 会 产生 上 、 下 段位 
的 广告 言 区 ， 上 广告 位 置 可 以 强烈 冲击 访客 视 竞 。 因 其 在 像素 为 1024 x768 的 条 件 下 显示 ， 
此 适用 于 高 科技 人 群 乐于 接受 的 高 端 产品 的 宣传 。 





移动 决 广告 种 类 也 有 有 很 多 ， 其 中 包括 开机 人 全屏 广 告 、 焦 点 图 广告 、Banner、 文 字 链 接 和 
消息 推送 。 





开机 全 屏 广 告 会 在 打开 一 个 App 的 时 候 展 现 ， 这 种 广告 的 曝光 率 极 高 ， 基 本 上 达到 了 
100% ， 十 分 符合 品牌 强 上 曝光 的 需求 。 但 是 一 般 开 机 广告 时 间 较 短 ， 并 且 不 可 以 外 链 ， 如 
图 8-6 所 示 。 


焦 扣 图 广告 是 打开 网 页 或 者 App 时 ， 处 在 显要 位 置 的 广告 ， 一 般 来 说 这 种 广告 的 曝光 
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率 也 很 高 ， 并 且 还 可 以 跳 转 到 相应 网 站 ， 如 图 8-7 所 示 。 


Hitl Ai] 


号 
S 
水 
hi 


各 
H 
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泰国 免税 店 返 红包 


mm < [于 | 





温泉 度假 ， 养 生 之 旅 
【温泉 】 北 京 龙 申 温泉 酒店 2 天 1 了 晚 





大 家 都 在 看 


SSE $ 
e f =La o 


日 本 也 用 支付 宝 


è H% 

















Ca- 
apra GEG 


距离 17.9 公 里 距离 19.8 公 里 距离 17.8 公 里 
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Banner 就 是 指 普通 的 横 屏 广告 ， 一 般 此 类 广告 出 现在 网 页 的 顶部 或 者 底部 ， 这 类 广告 
条 有 几 种 优势 。 

O 投放 精准 ， 能 够 抓 住人 群 偏好 。 

@ 点 击 可 以 外 链 ， 跳 转 到 活动 页 面 。 

O 创意 新 颖 的 Banner 可 以 有 效 提高 点 击 转化 。 

文字 链接 

文字 链接 是 指 将 广告 内 容 软 植 入 到 正文 内 容 中 ， 以 方便 浏览 者 接受 ， 通 常情 况 下 是 在 文 
章 未 尾 的 网 址 链接 ， 可 以 跳 转 到 活动 页 面 ， 如 图 8-8 所 示 。 
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地 址 : 黄浦 区 福州 路 666 号 华 塞 海 欣 大 厦 
联 我 ~ 9 楼 c 座 
2014-03-17 广告 门 广告 门 电话 : 021-60545851 
邮编 : 200001 


广告 门 华东 区 总 经 理 许 文 超 


E-mail: wenchao.xuU@adquan.com 


广州 地 区 : 
合作 垂询 : market@adquan.com 


更 多 精彩 资讯 请 关注 : 
广告 门 微 信 : adquan_2012 





北京 总 部 : 
地 址 : 北京 市 朝阳 区 东 三 环北 路 19 号 中 青 | | 多 博 : @ 千 站 

大 厦 1207 广告 门 网 站 : www.adquan.com 
电话 : 010-85887919 

邮编 : 100020 阅读 50712 36 


8-8 





在 手机 高 速 发 展 的 同时 ， 广 告 也 得 到 了 发 展 ， 消 息 推送 就 是 新 的 广告 方式 ， 这 种 广告 方 
新 品牌 或 促销 活动 的 信息 ， 而 且 是 需要 性 植 入 ， 避 免 了 浏览 者 的 不 满 ， 如 





8-9 所 示 。 


唯 品 
wi 韩 美 欧 三 国 进 
口 大 牌 ， 免 税 包 邮 ， 特 卖 狂 甩 ! 
me 唯 品 会 
这 有 随意 门 ， dl e et 国际 
欧洲 馆 今日 10 点 开 抢 ， .6 折 
B 


唯 品 会 
假装 在 纽约 ， 足 不 出 户 买 遍 美 
国 ， 全 场 0.9 折 起 ， 唯 品 国际 免税 包 
[| 


唯 品 会 


1.11 国 家 周 ， 唯 品 国际 带 你 扫 遍 美国 
A MD 免税 


星期 一 
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由 于 大 部 分 网 页 都 会 放置 一 些 广告 条 ， 因 此 ， 广 告 条 的 设计 也 是 一 项 十 分 重要 的 工作 ， 
对 尺寸 要 求 也 十 分 严格 。 

O 468 x 60 像素 : 这 是 国际 标准 尺寸 ,一般 用 于 GIF 动画 制作 。 在 设计 页 面 的 时 候 ， 可 
以 根据 网 页 页 面 占 用 空间 的 大 小 ， 来 制定 广告 条 的 位 置 和 广告 条 大 小 。 

@ 392 x72 像素 : 该 尺寸 用 于 垂直 导航 条 ， 目 前 在 网 上 比较 背 见 的 有 GIF 和 FLA 两 种 
格式 。 

@ 120 x60 像素 : 该 尺寸 用 于 按钮 设计 ， 是 目前 国内 网 站 应 用 最 广泛 的 广告 形式 之 一 。 

O 88 x31 ZZ: 该 人 本 为 国内 网 站 应 用 最 三 泛 的 Button 按钮 ， 也 称 为 网 站 的 LOGO. 

O 120 x240 像素 : 这 是 垂直 旗帜 的 尺寸 ， 国 内 的 网 站 比较 少见 
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@ 125 x125 像素 : 这 是 方形 的 广告 条 ， 国 外 网 站 应 用 较 多 ， 国 内 网 站 比较 少见 。 但 由 
于 该 尺寸 比较 方正 ， 与 其 他 尺寸 相 比 ， 该 尺寸 在 创作 上 有 了 一 定 的 空间 。 


虽然 网 络 广告 的 历史 不 长 ， 但 其 发 展 速 度 是 悚 人 的 ， 与 其 他 媒体 广告 相 比 ， 网 站 广告 还 
有 很 大 的 上 升 空间 。 

与 此 同时 ， 网 络 广告 的 形式 也 发 生 了 重要 变化 ， 以 前 的 网 站 广告 主要 形式 还 是 简 简 单单 
的 按钮 广告 ， 近 些 年 来 ， 长 横幅 和 大 尺寸 广告 已 经 成 为 了 主流 ， 被 各 大 网 站 所 接受 ， 如 
图 8-10 所 示 。 
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网 络 广告 之 所 以 能 够 如 此 迅速 发 展 ， 是 由 于 网 络 广告 具备 许多 电视 、 电 合 和 报纸 等 传统 
RASAT ERMER. 

@ 传播 范围 更 广泛 ， 传统 媒体 受 发 布 区 域 和 发 布 时 间 的 限制 ， 相 较 之 下 ， 因 特 网 广告 
的 传播 汇 围 极其 广泛 ， 只 要 能 够 上 了 网， 无 论 任 何人 任何 地 总 都 可 以 浏 席 到 广告 信息 。 

O 极 宣 创 意 有 旦 感官 性 强 . 全 4 采用 片面 且 单 一 的 表现 形式 ， 而 因特网 广告 
则 以 多 媒体 和 超 文本 格式 作为 载体 ， 通 过 图 片 、 文 字 、 声 首 和 影片 来 传送 多 感官 的 
信息 ， 使 浏览 者 有 和 号 临 其 境 的 感觉 。 

O 直达 核心 消费 群体 : 相 较 于 传统 媒体 的 目标 分 散 且 不 明确 的 问题 ， 网 站 广告 则 可 以 
直达 目标 人 和 群 。 

O DURA: 传统 媒体 广告 的 费用 及 其 昂贵 ， 而 且 发 布 后 很 难 修改 ， 即 使 修改 也 需 
付出 很 大 的 经 济 代价 ， 而 网 络 收费 不 仅 低 廉 而 且 方便 修改 。 

@ 互动 性 强 dio a lalala A, MANS, MiS) E 
的 主人 ， 浏 览 者 只 会 单 击 感 兴趣 的 广告 信息 ， 而 商家 也 可 以 在 线 随 时 获得 大 量 用 户 
的 反馈 信息 ， 提 高 统计 效率 。 

@ 准确 统计 广告 效果 : 传统 媒体 广告 很 难 准确 地 知道 有 多 少 人 接收 到 广告 信息 ， 网 络 
可 以 精确 地 统计 访问 量 ， 以 及 浏览 者 的 查阅 时 间 和 地 域 分 布 。 广 告发 布 者 可 以 正确 
评估 广告 效果 、 制 定 广告 策略 和 实现 广告 目标 。 
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本 实例 是 一 款 招 聘 网 站 的 广告 条 ， 以 蓝 色 为 主 色调 ， 辅 色 用 到 了 白色 和 黄色 ， 界 面 整体 通过 
投影 效果 突出 立体 的 感觉 ， 通 过 调整 投影 的 距离 ， 使 钱币 有 肪 空 的 感觉 ， 整 体 设计 个 性 化 十 足 。 


使 用 到 的 技术 ” ”| ”图 层 样式 、 钢 笔 工 具 、 横 排 文 字 工 具 
学 习 时 间 

视频 地 址 视频 \ 第 8 章 \ 招聘 网 站 广告 条 制作 . mp4 
源 文件 地 址 | 源 文件 \ 第 8 章 \\ 招聘 网 站 广告 条 制作 . psd 














《1 执行 “文件 > mer 
命令 ， 设 置 如 图 8-11 所 
示 的 参数 。 单 击 工 具 箱 中 : 
的 “油漆 桶 工具 ”按钮 ，: 
设置 前 景色 为 RCB (67 | MIA 
133 、245 ) ， 填 充 图 层 ， MI 
图 像 效 果 如 图 8-12 所 示 。 | 








i 8-11 E] 8-12 
《c3 单 击 工具 箱 中 的 
“钢笔 工具 ”按钮 ， 选 择 
“工具 模式 ”为 “形状 ” 
在 画布 中 绘制 RGB (68 : 
124、221) 的 形状 ， 如 图 | 
8-13 所 示 。 继 续 使 用 钢笔 
工具 ,更 改 填充 颜色 为 : 
RGB (45、91、168) 2£ ' 图 8-13 图 8-14 
制 如 图 8-14 所 示 的 图 形 。 
UV 提示 
钢笔 工具 绘制 完成 后 ， 如 果 图 形 效 果 不 满意 ， 需 要 进行 修改 ， 可 以 使 用 “直接 选择 
工具 ”选中 需要 调整 的 锚 点 ， 逐 一 进行 调整 。 也 可 以 使 用 “路 径 选 择 工 具 ” ， 选 中 整 条 








路 径 进 行 移 动 或 缩放 。 
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(O : 
相似 内 容 的 制作 ， 将 相关 : 
图 层 编 组 ， 重 命名 为 “ 晶 : 
体 1”， 图 像 效 果 如 图 8- 
IS 所 示 。 使 用 相同 方法 : 
完成 其 余 图 层 组 的 制作 ， 图 8-15 图 8-16 
图 像 效果 如 图 8-16 所 示 。 | 


VU 提示 
晶体 图 形 的 制作 原理 是 
色 深 浅 不 同 的 效果 ， 从 而 达到 








通过 更 改 基本 形状 的 颜色 ， 模 拟 光 照 情 况 下 晶体 每 个 面 的 顾 
立体 化 的 效果 。 


(0 单 击 工具 箱 中 的 
“钢笔 工具 ”按钮 ， 选 择 
“工具 模式 ”为 “形状 ， 











在 画布 中 绘制 RGB (244 、 | 图 8-17 
102. 116) 的 形状 20: = 一 s | ee 
图 8-17 所 示 。 单 击 图 层面 : Le A EE 一 


板 底部 的 “添加 图 层 样 : 
式 ” 按 钮 ， 在 弹出 的 : 
“图 层 样 式 ” 对 话 框 中 选 : 
择 “ 投 影 ”选项 ， 设 置 


如 图 8-18 所 示 的 参数 。 








图 8-18 
《c5 使 用 相同 方法 完成 

相似 内 容 的 绘制 ， 图 像 效 
果 如 图 8-19 所 示 。 单 击 
图 层面 板 底部 的 “添加 图 : 图 8-19 
层 样 式 ”按钮 ， 在 弹出 的 : | 
“图 层 样式 ”对 话 框 中 选 : 
择 “ 投 影 ”选项 ,设置 
如 图 8-20 所 示 的 参数 。 ”| 











PERE 
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CJ 单 击 工具 箱 中 的 
“ 横 排 文 字 工 具 ” 按 钮 ， 
设置 如 图 8-21 所 示 的 参 
数 ， 在 画布 中 输入 如 | 
图 8-22 所 示 的 文字 。 | 





8-21 8-22 


U 提示 
ARMAR AAA REA ARRE, ARANA PARA den 





色 不 统一 造成 的 ， 用 户 可 以 根据 喜好 更 换 其 中 的 颜色 和 大 小 。 





《co7 单 击 几 层面 板 底部 : 
的 “添加 图 层 样式 ” 按 : 
钮 ,在 弹出 的 “图 层 样 
式 ” 对 话 框 中 选择 “ 投 : 
影 ” 选 项 ， 设 置 如 图 8223 
所 示 的 参数 。 使 用 相同 方 : 
法 完成 相似 内 容 的 制作 ， 图 8-23 图 8-24 
图 像 效 果 如 图 8-24 所 示 。 | 
《ca 单 击 工具 箱 中 的 
“直线 工具 ”按钮 ， 设 置 | 
线条 粗细 为 1 像素 ， 在 画 
布 中 绘制 RGB (38, 94. : esa, £ 

189) 的 直线 ， 如 图 8-25 套 名 下 就 业 让 加 车 
所 示 。 使 用 相同 方法 完成 : 
相似 内 容 的 制作 ， 图 像 效 : 
果 如 图 8-26 所 示 。 : 
(00) 将 相关 图 层 编组 ，: 
重 命名 为 “流星 线 ”， 图 
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层面 板 如 图 8-27 所 示 。 执 - 
行 “ 文 件 > 打 开 ” 命 令 , = 
打开 素材 图 像 “ 素 材 > 第 : o 
8  >81401. png”, KR : = m man ， 





效果 如 图 8-28 所 示 。 : OCT 


8-27 8-28 


-200 6 
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(10 有 有 单 击 图 层面 板 底部 : 
的 “添加 图 层 样 式 ” 按 
钮 在 弹出 的 “图 层 样 | 
式 ” 对 话 框 中 选择 “ 投 
影 ”选项 ， 设 置 如 图 8-29 | 
所 示 的 参数 。 使 用 相同 方 
法 完成 其 他 内 容 的 制作 ， 图 8-29 图 8-30 
图 像 效 果 如 图 8-30 所 示 。 | 


a 使 用 抠 图 工具 合成 广告 条 


“ 抠 图 ”是 合成 网 页 广告 条 单 用 的 一 项 操作 ， 想 要 准确 地 从 图 像 中 提取 自己 需要 的 部 
分 ， 就 需要 抠 图 ， 很 多 优秀 广告 条 的 制作 都 需 要 抠 图 合成 如 图 8-31 所 示 。 


= 














AMAS 








-m m m ee 四 本 mm 
a 本 | mm a 
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在 Photoshop 中 有 很 多 工具 可 以 完成 抠 图 操作 ， 如 果 想 要 扣 取 的 对 象 边 缘 较 为 清晰 且 与 
背景 闫 色 有 明显 的 对 比 ， 就 可 以 使 用 “磁性 套 索 工具 ”， 如 图 8-32 所 示 为 “磁性 套 索 工具” 
选项 栏 


O 


HR. ME: oes MEE: 10% 
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@ 宽度 磁性 套 索 工具 只 检测 从 指针 开始 指定 距离 以 内 的 边缘 。 

@ 对 比 度 : 在 对 比 度 中 输入 一 个 介 于 1% 和 100% 之 间 的 值 。 较 高 的 数值 将 只 检测 与 其 
周边 对 比 鲜明 的 边缘 ， 较 低 的 数值 将 检测 低 对 比 度 边 缘 。 

O HZ: 指定 套 索 以 什么 频 度 设置 基 固 点 ,“ 频 率 ” 输 入 0 到 100 之 间 的 数值 。 较 高 的 
数值 会 更 快 地 固定 选区 Pros 

O XEEN: 使 用 交 笔 绘图 板 时 ， 可 以 选择 或 取消 选择 “ 交 笔 压力” 选项。 选中 了 该 
选项 时 ， 增 大 光 笔 压力 将 导 边缘 宽度 减 小 。 

单 击 工具 箱 中 的 “磁性 套 索 工具 ”按钮 ， 在 男 布 中 单 击 并 拖 动 鼠标 治 图 像 边 缘 移 动 ， 
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Photoshop 会 在 区 标 经 过 处 放置 巾 标 的 锚 扣 来 连接 选区 ， 如 图 8-33 所 示 。 将 光标 移 至 起 氮 处 ， 
单 击 即 可 闭合 选区 ， 如 图 8-34 所 示 。 





E] 8-33 图 8-34 
U 提示 
使 用 “磁性 套 索 工具 ”时 ,边界 会 对 齐 图 像 中 定义 区 域 的 边缘 。“ 磁 性 套 索 工具 ” 





不 可 用 于 32 位 /通道 的 图 像 。 


TEA 制作 万 至 节 广 千 


本 实例 是 一 款 圣 诞 三 专题 的 广告 条 ， 以 红色 为 主 色 调 ， 突 出 圣诞 三 欢 朱 的 气氛 ， 辅 色 用 
到 了 白色 和 绿色 ,界面 利用 图 层 样 式 模仿 丝 这 缠绕 的 效果 。 





图 层 样式 、 甜 形 工具 、 横 排 文字 工具 
EE 
视频 \ 第 8 EN 制作 万 圣 节 广告 条 . mp4 

源 文件 \ 第 8 章 \\ 制作 万 圣 节 广告 条 psd 
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0 打开 ” 
命令 ， 打 开 素材 图 像 “ 素 : 
材 > 第 8 章 >82101. psd”, : 
图 像 效 果 如 图 8-35 所 
示 。 图 层面 板 如 图 8-36 | 


所 示 。 


《C3 具 续 打 开 素材 图 像 ， 
如 图 8-37 所 示 。 单 击 工 
具 箱 中 的 “磁性 套 索 工 


具 ” 按 钮 ， 在 画布 中 沿 


图 像 的 边缘 连续 单 击 绘制 : 


选区 ， 如 图 8-38 所 示 。 


(os) 当 起 始 错 点 和 终点 : 
锚 点 重合 时 ， 闭 合 选区 的 
同时 选区 绘制 完成 ， 如 图 : 
8-39 所 示 。 使 用 “移动 工 : 
具 ” 将 选取 的 图 像 移动 到 : 
设计 文档 中 ， 如 图 8- 40 
所 示 ， 并 使 用 快捷 键 Cul | 
+ 了 调整 图 像 大 小 到 合适 : 


VE. 


《C 单 击 工具 箱 中 的 
“快速 选择 工具 ”按钮 ， 
将 笔触 调整 到 合适 大 小 ，: 
如 图 8-41 所 示 。 在 画布 : 
中 的 帽子 图 像 上 ， 从 上 到 : 
下 按 住 光 标 进行 滑动 , 如 


8-42 所 示 。 
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8-35 8-36 





8-37 8-38 





mi 8-40 
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(o) 选区 创建 完成 后 ， 
继续 使 用 移动 工具 将 选区 
图 像 移 动 到 设计 文档 中 ， 
并 适当 调整 其 位 置 和 大 
小 ， 如 图 8-43 所 示 。 使 : 
用 相同 方法 完成 相似 内 容 : 
操作 ， 如 图 8-44 所 示 。 | 
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(O : 
置 相关 参数 ， 如 图 8- 45 : 
所 示 。 单 击 工 具 箱 中 的 : 
“ 横 排 文字 工具 ”按钮 ， 
在 画布 中 输入 文字 ， 图 像 
效果 如 图 8-46 所 示 。 





8-46 





人 07 有 单 击 图 层面 板 底部 : 
的 “添加 图 层 样 式 ” 按 : 
钮 ， 在 弹出 的 下 拉 列 表 中 
选择 “和 斜面 和 浮雕 ” 选 
项 ,参数 设置 如 图 8- 47 
所 示 。 继 续 选择 “投影 ” 
选项 ， 参 数 设置 如 图 8-48 | 
所 示 。 | 8-47 8-48 





(0 设置 完成 后 , 文字 : 
效果 如 图 8-49 所 示 。 回 
到 从 素材 文件 中 ， 单 击 工 
具 箱 中 的 “快速 选择 工 
具 ” 按 钮 ， 在 画布 中 创建 
选区 ， 如 图 8-50 所 示 。 








8-49 8-50 
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《cg 将 图 像 移动 到 设计 
文档 中 ， 使 用 快捷 键 Cil | 
+T 调整 图 像 大 小 和 位 : 
置 ， 效 果 如 图 8-51 所 示 。 | 
使 用 相同 方法 完成 相似 : 
内 容 的 制作 ， 如 图 8-52: 
所 示 。 


“快速 选择 工具 ”也 是 创建 选区 的 快捷 工具 ， 调 整 画 笔 的 大 小 ， 在 想 要 抠 取 的 对 象 中 拖 
动 鼠 标 ， 就 可 以 快速 创建 选区 ， 选 区 会 随 厦 刀 标 的 移动 ， 自 动 查找 想 要 提取 的 图 像 的 边缘 。 
在 绘制 选区 时 ， 可 能 会 出 现 误差 ， 这 时 就 需要 适当 调整 选区 了 ， 如 图 8-53 所 示 。 





8-51 8-52 
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“ 广 棒 工具 ”也 是 一 个 快捷 抠 图 工具 ， 是 通过 设置 的 颜色 容 差 值 的 大 小 ， 来 选取 图 像 中 
的 颜色 范围 。 容 差 值 越 低 ， 选 取 时 所 包含 的 颜色 范围 和 选区 越 小 ， 相 反 的 容 差 值 越 高 ， 选 取 
时 所 包含 的 颜色 泄 围 和 选区 越 广 ， 如 图 8-54 所 示 。 
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U 提示 
如 果 想 要 抠 取 图 像 中 连续 的 颜色 区 域 ， 可 义 选 选项 栏 中 的 “连续 ”选项 。 








“钢笔 工具 ”主要 是 利用 被 抠 取 的 图 像 边 绿 来 绘制 路 人 径 ， 然 后 将 路 径 转 换 为 选区 来 实现 
抠 图 效果 。 

O 绘制 路 径 : 单 击 “ 钢 笔 工 具 ”， 设 置 “ 工 具 模式 ”为 “路 径 ” ， 使 用 鼠标 在 抠 取 对 象 
的 边缘 单 击 ， 新 建 工 作 路 径 。 在 扑 取 对 象 边 缘 多 次 移动 鼠标 并 单 击 ， 即 可 绘制 路 径 。 

© 调整 路 径 ; 绘制 好 路 径 以 后 ， 用 户 仍然 可 在 路 径 上 单 击 鼠标 ， 以 添加 一 个 新 杀 点 ， 
或 者 按 下 Ctrl 键 临时 切换 到 “直接 选择 工具 ”， 以 调整 当前 选中 的 锁 氮 。 

O 闭合 路 径 : 当 想 要 抠 取 的 对 象 完整 地 被 路 径 包 围 时 ， 只 要 用 鼠标 单 击 路 径 的 起 始 氮 ， 
即 可 闭合 路 径 。 

O 变换 选区 : 必须 将 其 变换 为 选区 ， 才 能 随便 拖 动 路 径 内 的 图 像 。 单 击 选项 栏 中 的 
i 按钮 或 按 快 捷 键 Ctrl + Enter, 即 可 将 路 人 径 转换 为 选区 o 


ARE O E REA OS REA ADA TRATA EKE, DO 
图 像 中 想 要 掀 取 的 主体 颜色 与 图 像 彰 景 颜色 没有 太 大 寺 寞 ， 这 时 就 用 到 “以 快速 蒙 版 模式 
编辑 ”工具 来 毛 图 。 


在 的 图 的 时 修 ， 不 免 会 遇 到 一 些 想 要 抠 取 的 图 像 边缘 还 有 一 些 背 景 中 的 杂 色 无 法 准确 清 
除 挥 的 情况 ， 这 时 就 需要 调整 边缘 这 项 操作 了 。 





调整 完 边缘 以 后 ， 被 抠 出 的 图 像 边缘 多 数 还 存在 着 一 些小 问题 ， 例 如 黑色 或 白色 的 杂 
E ei 文 些 问题 。 





在 抠 完 图 以 后 ， 图 像 边缘 可 能 会 遗留 一 些 细 小 的 白 边 或 黑 边 ， 只 要 执行 “ 修 边 ” 子 命 
ST, MÁ LME AG “> 修 边 > 移 去 黑色 杂 边 ”命令 ， 即 可 去 除 黑色 杂 边 ， 如 
8-55 所 示 。 





“去 边 ” 即 为 移 去 图 像 的 边缘 。 执 行 “图 属 > 修 边 > 去 边 ”命令 ， 在 弹出 对 话 框 中 的 “ 宽 
度 ” 文 本 框 中 输入 想 要 要 去 除 图 像 的 边 的 宽度 参数 值 单 击 “ 确 定 ”按钮 ， 即 可 移 去 图 像 的 边缘 。 
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U 提示 
执行 “去 边 ” 命 令 后 ， 图 像 边缘 会 出 现 比较 模糊 的 羽化 效果 ， 使 抠 取 的 对 象 在 背景 
图 像 中 看 起 来 更 自然 。 








很 多 的 广告 都 需要 各 种 华丽 的 装饰 ， 使 其 起 到 锦上添花 的 作用 ， 使 用 “画笔 工具 ”就 
可 以 完成 各 种 华丽 的 装饰 。 单 击 选 项 栏 中 的 “切换 画笔 面板 ”， 在 弹出 的 画笔 面板 中 有 许多 
国 笔 的 预 设 供用 户 选 择 ， 通 过 设置 各 项 人 参数 来 修改 当前 的 画笔 ， 并 且 可 以 设置 出 更 多 新 的 男 
笔 形 式 ， 如 图 8-56 所 示 。 
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(8.3 图 层 蒙 版 


使 用 “ 蒙 版 ” 抠 图 ， 可 以 保护 抠 取 对 象 以 外 的 区 域 ， 对 抠 取 出 现 误差 的 图 像 方便 进行 
调整 。 使 用 蒙 版 抠 图 ， 图 像 中 选择 的 区 域 也 就 是 不 需要 的 部 分 ， 将 会 被 图 层 蒙 版 遮盖 ， 而 需 
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要 显示 的 部 分 也 就 是 想 要 抠 取 的 部 分 就 是 选择 的 区 域 了 。 


图 层 壹 版 可 以 使 用 绘 男 工具 和 选择 工具 进行 编辑 ， 使 用 图 层 蒙 版 抠 图 可 以 保护 素材 的 完 
整 性 。 要 想 用 一 张 图 像 在 另 一 张 图 像 中 只 显示 其 中 的 某 个 部 分 ， 就 要 遮盖 图 像 中 不 想 显示 的 
部 分 ， 如 图 8-57 所 示 。 

画笔 工具 隐藏 图 像 : 选择 “画笔 工具 ”， 设 置 前 景色 为 黑色 ， 在 图 像 中 需要 隐藏 的 区 域 
进行 涂抹 ， 记 男 笔 涂抹 的 区 域 就 会 被 隐藏 。 

使 用 渐变 隐 沽 图 像 : 单 击 “添加 图 层 杜 版 ”按钮 ， 为 图 层 添 加 图 层 家 版， 使 用 “渐变 
工具 ”在 图 像 中 拖 动 ， 填 充 黑白 渐变 。 

创建 选区 隐 沽 图 像 : 将 图 像 中 需要 抠 取 的 对 象 使 用 选区 工具 框 选 ， 单 击 图 层面 板 下 方 的 
“添加 图 层 蒙 版 ”按钮 ， 没 有 被 选区 框 选 的 区 域 直接 被 隐藏 ， 被 框 选 的 区 域 即 为 选区 框 选 的 
区 域 ， 如 图 8-57 所 示 。 
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U 提示 





执行 “图 层 > 图 层 蒙 版 ”命令 ,在 子 菜单 中 可 选择 不 同 的 选项 为 图 层 添 加 图 层 蒙 
版 ， 也 可 以 使 用 相同 方法 添加 矢量 蒙 版 。 为 了 方便 ， 一般 会 单 击 图 层面 板 下 方 的 “添加 


蒙 版 ”按钮 为 图 层 添加 图 层 蒙 版 。 





有 了 时 直接 将 抠 好 的 图 放 入 男 一 个 背景 图 像 中 ， 可 能 会 出 现 图 像 边缘 不 够 圆滑 的 情况 ， 使 
合成 的 图 像 效 果 看 起 来 很 僵硬 ， 这 时 就 要 对 网 像 的 边缘 进行 处 理 ， 保 证 图 片 的 效果 真实 。 
8.5.3 ARERR 

剪贴 蒙 版 就 是 角 过 使 用 处 于 下 方 图 层 的 形状 来 限制 上 方 图 层 的 显示 状态 ， 达 到 一 种 剪贴 
国 的 效果 ， 即 “下 形状 上 颜色 ”。 

创建 剪贴 蒙 版 的 方法 很 多 ， 可 以 通过 执行 “图 层 > 创建 剪贴 蒙 版 ”命令 ， 使 用 快捷 键 Ctrl 
+ Alt+G， 也 可 以 按 住 Alt 键 ， 在 两 个 图 层 中 间 出 现 图 标 后 单 击 鼠 标 左 键 ， 如 图 8-58 所 示 。 
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上 提示 
创建 了 剪贴 蒙 版 以 后 ， 当 不 再 需要 的 时 候 ， 可 以 执行 “图 层 > 释 放 剪 贴 蒙 版 ”命令 
或 使 用 快捷 键 Shift + Ctrl + G。 


网 站 中 使 用 的 广告 条 最 好 不 要 过 于 复杂 ， 设 计 应 当 尽 量 直 白 一 些 ， 让 济 虹 者 很 容易 可 以 
看 明白 ， 广 告 条 尽量 避免 硬性 植 入 ， 这 样 容易 引起 浏览 者 的 有 反感， 如何 才 能 妹 达 到 了 宣传 的 
目的 ， 又 能 够 避免 浏览 者 的 反感 ， 是 在 设计 时 首先 需要 考虑 的 问题 。 


当 仿 社会， 广告 条 已 成 为 互联 网 产品 的 一 大 推广 平台 。 好 的 广告 条 能 够 豚 引 顾客 的 注 
意 ， 那 么 什么 桩 的 广告 条 是 能 够 被 用 户 接 爱 的， 是 设计 师 在 制作 时 需要 芳 虑 的 问题 。 

@ 文子 简单 : 广告 条 的 广告 语 读 起 来 要 明朗 上 口 ， 文 字 要 尽量 简单 ， 通 俗 易 恒 ， 用 一 
两 句 证 就 可 以 清楚 表达 所 说 的 内 容 。 

@ 图 形 简单 : 图 形 不 要 太 复杂 ， 尽 量 选 择 颜 色 数 少 ， 并 且 能 够 表达 清楚 问题 的 图 形 。 
如 果 选 择 颜 色 比 较 复 杂 的 图 形 ， 就 要 提前 考虑 一 下 如 果 在 颜色 数 少 的 情况 下 ， 会 不 
会 产生 明显 的 噪点 。 

@ 体积 小 : 为 避免 对 下 载 速度 产生 影响 ， 广 告 条 所 频 的 空间 应 尽 可 能 小 。 


在 设计 制作 网 页 中 的 广告 之 前 ， 需 要 根据 客户 的 意图 和 要 求 ， 将 前 期 做 好 的 调查 信息 加 
以 分 析 整 理 ， 成 为 完整 的 策划 资料 ， 它 是 网 页 广告 设计 制作 的 基础 ， 是 广告 具体 实施 的 
依据 。 

目前 网 页 广告 中 使 用 的 是 JPEG 的 静态 图 片 ， 动 男 主 要 以 GIF 和 Flash 两 种 格式 ， 使 用 
的 技术 主要 是 JavaScript 和 CGI 等 程序 。 目 前 网 站 上 最 常 使 用 的 是 静态 广告 图 片 ，GIF 动画 
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JE. Flash 动 国 广告 和 JavaScript 交互 广告 。 


(8 总 结 扩展 


本 章 主 要 介绍 一 些 用 于 制作 网 站 广告 设计 的 知识 氮 和 Photoshop 关于 掀 图 的 相关 工具 的 
使 用 ， 和 希望 通过 本 章 的 学 习 ， 可 以 对 网 页 广告 的 制作 有 一 定 的 心得 体会 。 

本 章 介 绍 了 许多 抠 图 与 合成 的 方法 。 抠 图 与 合成 是 许多 平面 设计 领域 都 不 可 缺少 的 技 
能 ， 不 仅 是 网 页 广 Io 许多 平 男 广告 也 是 通过 抠 图 合成 来 完成 一 幅 完 整 的 作品 。 项 
望 通过 本 章 的 学 习 ， 用 户 能 够 熟练 掌握 抠 图 与 合成 的 方法 和 技巧 。 


本 实例 制作 了 一 款 面 膜 网 站 的 广告 条 ， 该 实例 制作 方法 比较 简单 ， 使 用 钢笔 工具 创建 形 
状 ， 通 过 重复 复制 并 调整 图 形 等 操作 ， 完 成 广告 条 的 制作 。 
源 文 件 地 址 : 源 文 件 \ 第 8 章 \ 制作 面膜 网 站 广告 条 . PSD 
视频 地 址 . 视频 \ 第 8 EN 制作 面膜 网 站 广告 条 . MP4 











2. 使 用 “钢笔 工具 ”和 “直线 工具 ”在 画布 中 


1. 新 建国 布 并 使 用 “渐变 工具 ” 绘制 渐变 育 景 。 绘制 各 各 形状 


i; O ë x 
v AS > i 
SUMMER 夏季 不 做 黑人 Ad: : SUMMER 夏季 不 做 黑人 处 
pe : SKIN WHITENING | (28 
ÉS EK a 


于 a 
$ 


EA EIA AI 4. 将 素材 图 像 导入 ， 使 用 相同 方法 完成 文字 和 形 
状 内 容 的 制作 。 








$2 





1510) Um UA UI ixit 


由 于 智能 手机 被 大 众 广 泛 使 用 ， 促 使 移动 端的 界面 设计 
得 到 设计 师 的 广泛 关注 ， 并 进入 一 个 全 新 的 阶段 。 作 为 设计 
师 来 说 ， 当 网 站 UI 设计 进入 到 一 个 新 的 阶段 ， 更 加 需要 考虑 
用 户 访 问 环境 、 输 入 设备 、 分 辩 率 等 不 同 因素 对 界面 的 影响 。 
本 章 将 通过 实例 的 制作 ， 详 细 为 用 户 讲解 移动 端 网 站 UI 设计 
a 
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Eaim App mE 


这 里 将 为 用 户 详细 介绍 一 款 移动 端的 城市 App 界面 图 ， 用 户 在 设计 时 需要 区 分 移动 端 
和 计算 机 端的 区 别 ， 注 意 移动 端的 设计 规范 和 设计 原则 。 网 站 界面 设计 不 易 过 分 花哨 ， 必 须 
保证 界面 的 简洁 性 和 实用 性 。 

9.1.1 界面 分 析 


作为 一 款 实用 性 软件 ， 首 先 需 要 了 解 客户 的 需求 ， 最 好 将 App 的 Logo 和 广告 条 放 在 首 
RAR, AAA RES ETR MERKTA S App 的 详细 信息 ， 因 此 要 做 到 第 一 时 
引起 浏览 者 的 兴趣 。 此 款 界 面 将 广告 条 放置 在 首页 顶端 ， 之 后 是 图 标 分 类 ， 最 后 是 用 户 信 
息 ， 整 体 设 计 合 理 且 连 人 贯 性 好 。 

U 提示 


移动 端 界面 设计 需要 注意 按钮 的 尺寸 ， 不 宜 过 小 ， 尽 量 保证 按钮 分 布 在 大 部 分 浏览 








者 单 手 操作 可 以 控制 的 区 域内 。 


9.1.2 色彩 分 析 
此 款 界面 采用 清新 雅致 的 绿色 和 温和 大 气 的 白色 作为 主 色调 ， 界 面 轻 松 自然 ， 辅 色 用 到 


了 杰 色 ， 局 部 点 缀 用 到 了 监 色 ， 人 整体 界面 朴 系 简 单 。 从 总 体 效果 来 看 ， 界 面 既 简单 干将， 又 
ASE, 


CELIS E 


此 款 广 告 条 以 和 白色 作为 主 色 调 ， 辅 色 用 到 了 黑色 和 蓝 色 ， 界 面 虽 然 朴 素 ， 但 足以 将 想 要 
表达 的 内 容 告 知 浏览 者 。 


BE SURE YOU PUT YOUR FEET 
IN THE RIGHT PLACE 


PRES5 ME 














farag 





RETA, MATA, EA 


IMA BAUL 








25 分 钟 

















和 01 有 执行 “文件 > 新 建 ”: 
命令 ,设置 如 图 9-1 所 示 
的 参数 。 执 行 “文件 > 打 | 
开 ” 命 令 ， 将 打开 的 素材 ， 
图 像 移动 到 设计 文档 中 ， 
如 图 9-2 所 示 。 


(002 有 新 建 图 层 ， 单 击 工具 : 
BO FERCA TA 
按钮 ， 在 画布 中 创建 选区 ， 
如 图 9-3 所 示 。 单 击 工具 箱 | 
中 的 “渐变 工具 ”按钮 ， 
打开 工具 选项 栏 中 的 “ 渐 : 
变 预览 条 ”选项 ， 设 置 如 


E 9-4 所 示 的 参数 。 


《Ca 为 选区 填充 从 黑色 
到 透明 的 渐变 色 ， 图 像 效 : 
果 如 图 9-5 所 示 。 打 开 图 : 
层面 板 ， 修 改 图 层 不 透明 : 
度 为 70% ， 图 像 效果 如 


9-6 所 示 。 


(0 单 击 工具 箱 中 的 
“ 横 排 文 字 工具 ”， 打 开 : 
字符 面板 ， 设 置 如 图 9-7 | 
所 示 的 参数 ， 在 画布 中 输 : 


入 如 图 9-8 所 示 的 文字 。 


视频 \ 第 9 章 \ 移动 端 城 市 App 界面 一 一 广告 条 . mp4 
产 文件 \ 第 9 章 \ 移动 新 城市 App 界面 psd 























BE SURE YOU PUT YOUR FEET 
IN THE RIGHT PLACE 





9-8 
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《c5 单 击 工具 箱 中 的 
“椭圆 工具 ”按钮 ， 在 画 : 
布 中 绘制 黑色 椭圆 ， 如 
图 9-9 所 示 。 继 续 打 开 一 | BE SURE YOU PUT YOUR FEET 
J DIN E IN THE RIGHT PLACE 
KRYR RH HARIT : 

文档 中 ， 如 图 9-10 所 示 。 | 


BE SURE YOU PUT YOUR FEET 
IN THE RIGHT PLACE 





9-10 
单 击 工具 箱 中 的 | ERE -= 党 加 
i i a. Aa 一 = i be E O as EHAR B 
“矩形 工具 ”按钮 ， 在 画 a 1 AA ===. A 


A 2 EEE, 0 E 
图 9-11 所 示 。 单 击 图 层面 | 
板 底部 的 “添加 图 层 样 : 
式 ” 按 钮 ， 在 弹出 的 
“图 层 样式 ”对 话 框 中 选 : 





择 “投影 ”和 “外 发 光 ”: 图 9-11 图 9-12 
选项 ， 设 置 如 图 9-12 所 : 
示 的 参数 。 


COJE RIA: 
在 画布 中 绘制 填充 为 白色 | 
描 边 为 RGB (173, 175, ` 
181) H4, ME 9-13 | 
所 示 。 打 开 字 符 面板 ,， 参 
数 设置 如 图 9-14 所 示 ， 
在 画布 中 输入 文字 。 











9-13 9-14 


《ca 连 读 打开 多 张 素材 : 
图 像 ， 并 依次 将 其 拖 入 到 : 
设计 文档 中 ， 调 整 位 置 和 
大 小 ， 如 图 9-16 所 示 。 
单 击 工具 箱 中 的 “ 横 排 文 : 
字 工 具 ”， 在 画布 中 输入 | 
如 图 9-15 所 示 的 文字 。 ”| 









This is Photoshop's version of 


Lorem Ipsum. 


9-15 9-16 





CJE “BERTA” 
在 画布 中 绘制 填充 为 RGB | 
(34. 125. 211) 的 和 矩形 ， 
图 像 效 果 如 图 9-17 FO | 
打开 字符 面板 设置 参数 ， 
在 画布 中 输入 文字 ， 如 图 ， 


9-18 所 示 。 


U 提示 





移动 庄 网 站 Or 设计 











TT 了 25.565 5 
WA 度 旦 标准 





BE SURE YOU PUT YOUR FEET 
IN THE RIGHT PLACE 


1 [This is Photoshop's version of 
I Lorem Ipsum. 
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由 于 实例 中 的 图 层 较 多 ， 将 相关 图 层 进 行 编组 处 理 ， 可 以 防止 图 层 错乱 ， 同 时 也 方 


便 后 期 制作 人 员 进 行 修改 。 








(DEA 移动 端 城市 App 界面 一 一 主体 


作为 App 的 核心 内 容 ， 


更 多 的 不 是 装饰 ， 而 是 实用 ， 可 以 让 浏览 者 在 最 短 的 时 间 内 找 


到 需要 的 东西 。 此 款 寞 面 简 单 明 了， 避免 了 大 量 点 约 ， 以 清新 面孔 示人 。 


拭 形 工具 、 自 定义 形状 工具 、 图 层 样 式 





20 分 钟 
视频 \ 第 9 章 \ 移动 新 城市 App 界面 一 一 主体 . mp4 





(101 继续 上 一 个 实例 。 单 
击 工具 箱 中 的 “ 圆 角 矩形 
工具 ”按钮 ， 在 画布 中 绘 : 
$] RGB (67、160、109 ) i 
的 圆 角 矩形 ， 如 图 9-19 所 : 
示 。 单 击 工具 箱 中 的 “转换 : 
点 工具 ”按钮 ， 单 击 错 点 进 : 


行 转换 ， 如 图 9-20 所 示 。 





产 文件 \ 第 9 章 \ 移动 新 城市 App 界面 psd 


9-19 
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人 02 有 单 击 图 层面 板 底 部 : 
的 “添加 图 层 样 式 ” 按 
钮 ， 在 弹出 的 “图 层 样 
式 ” 对 话 框 中 选择 “ 投 : 
影 ”选项 ， 设 置 如 图 9-22 | 
所 示 的 参数 。 使 用 “钢笔 | 
工具 ”在 画布 中 绘制 
RGB (95, 193, 139) 和 图 9-21 图 9-22 
RGB (46, 115, 77) E: 

形状 ， 如 图 921 所 示 。 


《kc3) 使 用 “钢笔 工具 ”| uu 

在 画布 中 绘制 形状 , ER; E 
效果 如 图 9-23 所 示 。 单 F- 

击 工具 箱 中 的 “钢笔 工 ， E 
具 ” 按 钮 ， 在 画布 中 绘制 。 由 | 
白色 形状 , mí 924 EMOL 


PTA 
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ho4 及 更改 工具 选项 栏 中 
的 “路 径 操 作 ” 为 “ 减 : 
去 顶层 形状 ”选项 ， 使 用 : 
“钢笔 工具 ”在 画布 中 进 
行 绘制 ， 如 图 9-25 所 示 。 | 
使 用 相同 方法 完成 相似 内 ， 
容 的 制作 ， 图 像 效 果 如 图 | 
9-26 所 示 。 | 9-25 9-26 





(005 有 使 用 “直接 选择 工 
具 ” 调 整形 状 个 别 锚 点 ， 
如 图 9-27 所 示 。 打 开 字符 : 
面板 ,分 别 设置 两 种 不 同 : 5) 
字号 的 文字 参数 ， 字 符 面 
板 如 图 9-28 所 示 。 





9-27 9-28 





移动 端 网 站 UI 设计 


和 06 有 在 画布 中 输入 字体 相 

同 、 字 号 不 同 的 两 种 文字 ，: 

图 像 效果 如 图 9-29 所 示 。 | 

按 住 之 前 的 操作 步骤 ， 继 Documents 

续 绘制 红色 的 图 标 ， 并 输 : ho 
入 相应 文字 说 明 ， 图 像 效 | 

果 如 图 9-30 所 示 。 : 9-29 9-30 


(Desarme “E 
ELA” RH, ERA 
绘制 RCB (95, 193, 139) ` 
的 矩形 ， 如 图 9-31 所 示 。 
单 击 工具 箱 中 的 “ 圆 角 甜 
KIR” RH, AAIR. 
选项 栏 上 的 “合并 形状 ”| 
选项 ， 在 画布 中 绘制 白色 的 图 9.31 2930 


ARA, AE 9-32 所 示 。 


BE SURE YOU PUT YOUR FEET 
IN THE RIGHT PLACE 





aliquet. Aenean sollicitudin 











《oa 修改 “路 径 操 作 ” 
为 “ 减 去 顶层 形状 ">， 使 用 : 
“矩形 工具 ”在 画布 中 绘制 : 
如 图 9-33 所 示 的 图 形 。 单 | 
击 工具 箱 中 的 “钢笔 工具 ”: 
按钮 ， 继 续 在 “ 减 去 顶层 : 








形状 ”选项 下 进行 绘制 ， 9-33 9-34 
如 图 9-34 所 示 。 


U 提示 
“路 径 操 作 ” 改 为 “合并 形状 ”可 以 在 同一 图 层 内 继续 绘制 矩形 ， 也 可 以 绘制 3 个 





矩形 后 ， 合 并 图 层 形状 ， 得 到 的 效果 相同 。 





出 的 下 拉 列 表 中 选择 “ 投 
影 ” 选 项 ， 使 用 相同 方法 
完成 相似 内 容 操 作 ， 如: 
图 9-36 所 示 。 


Cta “HAIR” 在 ; e J 
“ 减 去 顶层 形状 ”选项 下 绘 E 

制 圆 形 ， 如 图 9-35 所 示 。 A e 

加 图 层 样式 ”按钮 ， 在 弹 


9-35 9-36 


o 227 一 
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人 10 上 打开 字符 面板 ， 设 : 
置 2 种 字号 的 文字 参数 ， 
如 图 9-37 所 示 。 使 用 
“ 横 排 文字 工具 ”输入 文 
字 后 ， 如 图 9-38 所 示 。 





9-37 9-38 


Y 提示 
男装 专区 的 制作 与 女装 专区 的 制 作 方 法 相同 ， 此 处 不 再 次 述 。 注 意图 层 样 式 和 字体 





大 小 的 设置 。 





QAH “移动 端 城市 App 界面 一 一 底部 


TRE ARE 的 重点 ， 将 城市 的 地 图 展示 出 来 ， 在 一 定 程 度 上 可 以 引导 用 户 
熟悉 查询 的 城市 。 这 类 内 容 一 般 以 图 片 展示 为 主 ， 搭 配 少量 的 文字 说 明 ， 以 保证 整体 





25 分 钟 
视频 \ 第 9 章 \ 移动 话 城 市 App 7 界面 一 一 底部 . mp4 
ISSN 第 9 章 \ 移动 痕 城 市 App AARRE. psd 








《ci] 接 上 一 个 实例 ,使 用 : 
相同 方法 完成 相似 模块 的 : 
制作 ， 图 像 效果 如 图 9-39 
所 示 。 执行“ 文件 > 打 
H” iS, TAKEN: 
图 像 ， 将 其 移动 到 设计 文 ， 
档 中 ， 如 图 9-40 所 示 。 | 9-39 9-40 





—o AS o 





EM ”移动 端 网 站 UI 设计 





(002 单 击 工 具 箱 中 的 = 
“椭圆 工具 ”按钮 ， 在 画 : 

布 中 绘制 RGB (255. | 

255, 255) 的 圆 形 ， 如 | 

图 9-41 所 示 。 单 击 图 层 : Ar 
面板 底部 的 “添加 图 层 样 : 

式 ” 按 钮 ， 在 弹出 的 下 拉 : => 
列表 中 选择 “外 发 光 ”: 图 9-41 Se 
选项 ， 如 图 9-42 所 示 。 | 





(103 参数 设置 完成 , 单 a 
击 “ 确 定 ”按钮 确认 操 | 本 < 
E, 图 像 效 果 如 图 9-43 - = ; 
所 示 。 单 击 工具 箱 中 的 
GEKTAR”, EAH. pa AN Pol | 
绘制 填充 白色 描 边 为 RCB A E A 
(173, 175, 181) ģ5 4%: | J 
É, 如 图 9-44 所 示 。 图 9-43 图 9-44 


Si 
AA 


(继续 单 十 工具 箱 中 2 全 7 Y FM 
H FERIA" RA, A < 
在 画布 中 绘制 填充 为 自 色 E Y 

描 边 为 RGB (173, 175, i. 
181) 的 矩形 ， 如 图 9-45 | 
所 示 。 使 用 相同 方法 完成 : 
相似 内 容 的 制作 ， 如 图 9- : 
46 所 示 。 | 9-45 9-46 


HAMRAMÁL L 
ai] 





人 05 有 打开 字符 面板 ， 设 : 
置 如 图 9-47 所 示 的 参数 。 
单 击 工具 箱 中 的 “和 矩 横 排 
文字 工具 ”按钮 ， 在 画布 : 
中 输入 相应 的 文字 内 容 ， 
并 修改 图 层 不 透明 度 为 : 
80% ， 如 图 9-48 所 示 。 


NT 
EN 





9-47 9-48 
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fos) 单 击 工具 箱 中 的 
META” HE, EE: 
布 中 绘制 任意 颜色 的 正 圆 : 
形 ， 如 图 9-49 所 示 。 修 : 
改 “ 路 径 操作 ”为 “ 减 
去 顶层 形状 ”"， 在 画布 中 
绘制 如 图 9-50 所 示 的 i 


图 形 。 


人 07 有 有) 单 击 工具 箱 中 的 “ 直 : 
接 选 择 工具 ”按钮 ， 调 整 
形状 的 锚 点 ， 如 图 9-51 所 : 
示 。 使 用 “和 矩形 工具 ”， 
在 画布 中 绘制 RGB i 
(177. 177. 178) (K 4E 
形 ， 图 像 效 果 如 图 9-52 | 


FASO 


《os 操作 内 容 全 部 完成 : 
后 ， 图 像 效 果 如 图 9-53 
所 示 ， 整 理 图 层面 板 将 相 
关 图 层 编组 ， 图 层面 板 如 : 


9-54 所 示 。 


(9 2) 








o 








9-49 9-50 








Y 


9-51 9-52 
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企业 类 的 网 站 不 同 于 其 他 网 站 界面 ， 整 体 设计 不 仅 需 要 突出 企业 形象 ， 而 且 还 要 注意 对 
企业 产品 的 宣传 ， 以 方便 浏 贤 者 了 解 企业 特性 。 


YU 提示 





网 站 的 宣传 无 疑 是 企 





业 宣 传 的 首选 ， 因 此 ， 不同 的 企业 类 型 对 于 网 站 的 设计 方向 也 


大 不 相同 ， 基 本 可 以 将 企业 网 站 分 为 基本 信息 类 企业 网 站 、 多 媒体 广告 类 企业 网 站 和 电 


子 商务 类 企业 网 站 3 种 。 
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9.2.1 界面 分 析 


作为 一 款 手 机 端的 企业 网 站 界面 ， 在 布局 上 要 体现 出 大 方 和 简洁 的 风格 ， 只 有 这 样 才能 
体现 出 网 站 的 意义 。 这 是 一 款 设 计 类 企业 的 网 站 界面 ， 此 界面 将 宣传 部 分 放 在 了 网 站 的 顶 
靖 ， 起 到 了 吸引 读者 的 目的 ， 以 大 量 成 功 实 例证 明 企 业 实 力 ， 而 且 以 半 透 明 色 块 搭配 的 方式 
展示 整个 界面 ， 神 秘 而 又 市 有 设计 感 ， 十 分 符合 设计 类 网 站 的 设计 特 氮 。 
9.2.2 色彩 分 析 

本 实例 多 处 使 用 了 半 透 明 的 效果 ， 拱 配 衬托 的 素材 ， 加 强 了 人 整体 界面 的 设计 感 ， 主 要 色 
调 使 用 到 了 权 黄 色相 紫色 ， 以 高 冷 和 温暖 的 色彩 相 捧 配 ， 色 彩 的 撞击 做 到 了 豚 引 浏览 者 目光 
的 目的 ， 高 明度 的 界面 给 入 安定 、 活 泌 和 大 气 的 印象 ， 文 字 普 遍 使 用 白色 ， 与 背景 有 反 闫 极 
大 ， 可 识别 度 高 ， 使 浏览 者 可 以 很 快 找到 需要 了 解 的 内 容 。 


"实例 “移动 端 企业 网 站 界面 一 一 广告 条 


本 实例 制作 的 是 网 站 卉 血 的 广告 条 ， 广 告 条 的 作用 就 是 宣传 相 豚 引 浏 虹 者 ， 这 里 使 用 了 
权 黄 色 作 为 主 色调 ， 撞 配 紫 色 的 边框 效果 ， 整 体 界面 富有 神秘 感 。 


">、 o | o 
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你 喜欢 的 


网 站 和 应 用 ge 











使 用 到 的 技术 RETA, MAILR, KEFA 


S 可 25 分 钟 





视频 地 址 | “视频 \ 第 9 章 \ 移动 端 企业 网 站 界面 一 一 广告 条 . mp4 
源 文 件 地 址 








(0 人 执行 “文件 > 新 建 ”: 
命令 ,设置 如 图 9-55 所 
示 的 参数 。 单 击 工具 箱 中 
的 “和 珑 形 工具 ”按钮 ， 
在 画布 中 绘制 任意 颜色 的 : 


颜色 配置 文件 : 工作 中 的 RGB: sRGB IEC619... ~ 


和 矩形， 如 图 9-56 所 示 。 En 








9-55 9-56 


o 251 ee 一 


0 网 站 UI 设计 第 2 版 oO 


(02 有 执行 “文件 > 打开”: 
命令 ， 打开 素材 图 像 “ 素 
材 > 第 9 Æ >92201. png”， 
将 素材 图 像 拖 入 到 设计 文 | 
档 中 ， 适 当 调 整 图 像 的 位 : 
置 和 大 小 ， 图 像 效 果 如 同 : 
9-57 所 示 。 执行 “图 层 > | 
a 


像 效 果 如 图 9-58 所 示 。 
desta 
RETA” RH, EE 
布 中 绘制 RGB (232, 67, 
46) 的 矩形 ， 设置 图 层 | 
“NERE” 20%, 如 | 
9-59 所 示 。 使 用 相同 | 
方法 完成 相似 内 容 的 制 
作 ， 如 图 9-60 所 示 。 


ODRE “XHA” 
命令 ， 打开 素材 图 像 “ 素 
材 > 第 9 章 >92202. png”, : 
将 素材 图 像 拖 入 到 设计 文 
档 中 ， 适 当 调 整 图 像 的 位 : 
置 和 大 小 ， 图 像 效 果 如 图 | 
9-61 所 示 。 单 击 图 层面 板 : 
底部 的 “添加 图 层 样式 ” 
按钮 ， 在 弹出 的 “图 层 样 
式 ” 对 话 框 中 选择 “ 投 
影 ”选项 ， 设 置 如 图 9-62 | 


所 示 的 参数 。 


005) 单 击 工具 箱 中 的 | 
“ 横 排 文字 工具 ”， 在 画 | 
布 中 输入 如 图 9-63 所 示 
的 文字 。 使 用 相同 方法 完 
成 相似 内 容 的 制作 ， 如 


9-64 所 未 。 





图 9-57 





Fl 9-58 


图 9-59 


9-61 


飞翔 设计 


Fl 9-60 











9-62 


z 

V 飞 期 设计 
我 们 只 做 
M=YX BY 


IE 


看 看 我 们 曾经 的 制作 


9-64 





《06 有 执行 “文件 > 打开 ” 
命令 ， 打 开 素材 图 像 “ 素 ， 
材 > 第 9 Æ >92203. png”, 
将 素材 图 像 拖 入 到 设计 文 : 
档 中 ,适当 调整 图 像 的 位 : 
置 和 大 小 ,图像 效果 如 
图 9-65 所 示 。 单 击 图 层面 : 
板 底部 的 “添加 图 层 样 
式 ” 按 钮 在 弹出 的 
“图 层 样式 ”对 话 框 中 选 


择 “ 描 边 ” 选 项 ,设置 


如 图 9-66 所 示 的 参数 。 


(07 继续 选择 “投影 ” 
选项 ， 设 置 如 图 9-67 所 : 
示 的 参数 。 使 用 相同 方法 | 
完成 相似 内 容 的 制作 , 如 : 


9-68 PR, 


《ca 将 相关 图 层 编组 ， 
重 命名 为 “广告 "， 图 像 : 
效果 如 图 9-69 所 示 。 单 : 
击 工具 箱 中 的 “ 横 排 文字 | 
工具 ”， 在 画布 中 输入 如 : 


9-70 所 示 的 文字 。 


对 提示 
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9-65 9-00 


Y at 
我 们 只 做 
EAI 


网 站 和 应 用 as 


D 看 看 我 们 曾经 的 制作 








9-67 9-68 


Temo Tup ® 
“ PAHE: 100% ~ 


HO B 填充 : 100% > 





9-69 9-70 


企业 网 站 与 其 他 网 站 设计 方面 略 有 不 同 ， 企 业 网 站 要 给 浏览 者 严肃 正式 的 感觉 ， 


得 较为 正式 。 
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人 [09 有 使 用 相同 方法 完成 : Er 
相似 内 容 的 制作 ， 图 像 效 A 
果 如 图 9-71 所 示 。 将 相关 : ‘ey raa 
E 编 ZA, E 效 RE 如 | ot 


E 


我 们 只 做 


网 站 和 应 用 5 


9-72 所 示 。 | 你 喜欢 的 


Q) 看 看 我 们 置 经 的 审 作 





欢迎 ! 
e 交流 Y 创意 灾 发 展 

我 们 的 想法 超 乎 常人 
我 们 的 做 法 大 胆 前 卫 

要 选择 相信 我 人 
我 们 会 您 一 个 惊喜 

>T 
9-71 9-72 


"实例 “移动 端 企业 网 站 界面 一 一 主体 


作为 企业 网 站 的 主体 部 分 ， 要 充分 体现 出 企业 文化 和 发 展 理念 。 此 款 界 面 以 半 透 明 色 块 
人 相 搭 配 ， 使 民 部 图 片 耕 隐 奢 现 ， 增 加 人 神秘 感 ， 同 时 使 说明 文字 可 辨识 度 提升 。 
se a ES 


ooo AT TAN 1009, mm- 
网 站 和 和 区 天 8 É 











设计 精美 的 技术 
特别 注音 细节 





EA EA ES RA AS LS 





RETA, MAITE. BARA 
25 Nh 

















《GDJ 单 击 工具 箱 中 的 
“矩形 工具 ”按钮 ， 在 画 E 
布 中 绘制 RGB (232, 67, | 
46) 的 矩形， 如 图 9-73: 
所 示 。 单 击 工具 箱 中 的 
“ 模 排 文字 工具 ”"， 在 画 
布 中 输入 如 图 9-74 所 示 : 
-a a 9-74 


欢迎 ! 





—————— 25L 0 





人 102 有 单 击 图 层面 板 底部 : 
的 “添加 图 层 样式 ” 按 ; 
钮 ， 在 弹出 的 “图 层 样 : 
式 ” 对 话 框 中 选择 “ 描 
边 ”选项 ， 设 置 如 图 9-75 
所 示 的 参数 。 使 用 相同 方 ， 
法 完成 相似 内 容 的 制作 ， 


如 图 9-76 所 示 。 


003 有 将 相关 图 层 编组 
EPRA AFM, 
图 层面 板 如 图 9-77 所 示 。 | 
单 击 工具 箱 中 的 “和 矩形 工 
具 ” 按 钮 ， 在 画布 中 绘制 ， 
TRAE MIER, 如 | 


[E 9-78 TR, 


《4 执行 “文件 > 打开 ” 
命令 ,打开 素材 图 像 “ 素 : 
材 > 第 9 章 > 92205. png”, : 
将 素材 图 像 拖 入 到 设计 文 | 
档 中 ,适当 调整 图 像 的 位 : 
置 和 大 小 ， 图 像 效 果 如 同 | 
9-79 所 示 。 执 行 “ 图 层 > : 
创建 剪贴 蒙 版 ”命令 , 图: 


像 效 果 如 图 9-80 所 示 。 


(5) 单 击 工具 箱 中 的 : 
“ 横 排 文字 工具 ”"， 在 画 
布 中 输入 如 图 9-81 所 示 : 
的 文字 。 使 用 相同 方法 完 : 
成 相似 内 容 的 制作 ， 图 像 


效果 如 图 9-82 所 示 。 











特色 工作 


在 这 里 你 会 得 到 你 想得到 
的 设计 和 创意 ! 


e AMA. A 
BAHEA E. AA 
"网 页 版 机 前 样式 ， 同 页 的 视觉 齐 程 
网 页 鼎 年 前 视觉 均 玫 网页 片面 的 
BÉ. AMMA. ADAM 
ASH. ARMAS. BE 
MASA. AAA. A 
A E C 


+ 工作 内 容 
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9-78 


9-80 


9-82 
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《06 有 将 相关 图 层 a H, 
重 命名 为 “产品 1”， 使 
用 相同 方法 完成 “产品 
2” 图 层 组 的 制作 ， 图 像 : 
效果 如 图 9-83 Piar. E | 
击 工具 箱 和 中 的 “ 自 定义 形 
状 工具 ”按钮 ， 在 画布 中 : 
绘制 白色 形状 ， 设 置 图 层 | 
“不 透明 度 ” 为 60% ， 如 
图 9-84 所 示 。 | 


(007 有 将 相关 图 层 编组 ， 
重 命名 为 “主体 1”, 图 : 
层面 板 如 图 9- 85 所 示 。 
单 击 工具 箱 中 的 “和 矩形 工 
具 ” 按 钮 ， 在 画布 中 绘制 
任意 颜色 的 矩形 如 
图 9-86 所 示 。 


【08 执行 “文件 > 打开 ” i 
DS, TARDAR 
材 > 第 9 章 >92207. png”, : 
将 素材 图 像 拖 入 到 设计 文 : 
档 中 ， 适 当 调整 图 像 的 位 
置 和 大 小 ， a 
图 9-87 所 示 。 执 行 | 

OS 


图 像 效果 如 图 9-88 所 示 。 


人 [09 单 击 工 上 其 箱 中 的 
“矩形 工具 ”按钮 ， 在 画 
布 中 绘制 黑色 的 矩 形 ， 设 : 
ER “PË 明度 ”为 
80% ， 如 图 9-89 所 示 。 
单 击 工 具 箱 中 的 “椭圆 工 
具 ” 按 钮 ， 在 画布 中 绘制 : 
如 图 9-90 所 示 的 正 圆 形 。 
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“不 过 了 明度; 100% ~ 
E â ÑA: 100% ~ 
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“ 210 HE E H o FE {H > 在 © TI 16.16 5 r 18.18 点 
==, i VA EE we 0 
画布 中 绘制 如 图 9-91 所 os 
示 的 三 角形 。 单 击 工具 箱 : 设计 精美 的 技术 iT joow e 
66 >- > 3% 特别 注意 细节 o Ka DO” 
中 的 “ 横 排 文字 工具 ”， aog a. 
EE AAA O El 9-92 . EAS 
所 示 的 文字 。 | 


9-91 9-92 


《将 相关 图 层 编组 ， 
重 命名 为 “主体 2”， 图 : 
层面 板 如 图 9-93 所 示 。 
使 用 相同 方法 完成 “主体 : 
3” 的 制作 ， 图 像 效果 如 : 
图 9-94 所 示 。 





9-93 9-94 





(93 专家 走 招 


移动 端 网 站 UI 设计 重要 的 是 尺寸 、 兼 容 性 和 响应 式 设 计 。 玫 机 毕竟 不 是 计算 机 ， 在 很 
多 方面 比 不 上 计算 机 ， 设 计时 需要 特别 注意 ， 尤 其 是 按钮 的 位 置 和 大 小 ， 小 细 广 往往 决定 整 
个 网 页 的 成 败 。 


9.3.1 了 应 陈设 计 是 否 适 合 于 专题 设计 


如 今 越 来 越 多 的 移动 设备 出 现在 我 们 身边 ， 作 为 设计 师 ， 对 网 站 专题 的 设计 进入 到 一 个 
新 阶段 ， 需 要 考虑 得 更 多 。 响 应 式 网 页 是 目前 热门 的 解决 方案 ， 好 比 一 双 男 生 的 休闲 圣 ， 可 
以 与 所 有 裤子 进行 随意 搭配 。 但 是 对 于 专题 设计 来 说 ， 响 应 式 设计 并 不 合适 。 

专题 网 页 的 设计 通常 是 短平快 ， 在 特定 时 间 达 到 一 些 运营 需求 。 而 响应 式 设计 通常 需要 
考虑 更 多 不 同 分 辨 率 下 的 响应 效果 ， 花 费 的 设计 和 开发 的 时 间 成 本 可 能 是 双 倍 的 ， 并 且 专 是 
设计 具有 很 强 的 形式 感 ， 而 响应 式 设计 的 流体 布局 必然 会 对 视觉 造成 限制 ， 所 以 对 于 专题 页 
面 来 说 ， 做 成 响应 式 的 网 站 就 需要 慎重 考虑 。 最 高 效 的 办 法 就 是 为 手机 版 单独 做 一 版 设计 
稿 ， 让 手机 版 网 页 满足 通用 的 移动 设备 分 辨 率 。 


9.3.2 先 做 计算 机 端 页 面 还 是 手机 端 页 面 


这 个 主要 是 依据 用 户 的 访问 数据 来 定 。 一 般 情况 下 痢 是 先 做 计算 机 闻 的 页 面 ， 表 做 手机 
闹 的 页 向 ， 计 算 机 闻 网 页 可 以 呈现 更 丰 是 的 内 容 ， 用 户 浏 蛤 网 页 时 更 专注 ， 达 到 最 好 的 体 
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验 。 但 有 很 多 情况 下 ， 页 面 的 访问 蝎 多 来 自 于 机 疹 ， 比 如 手 游 的 专题 ， 用 户 通 过 微 信 、 于 和 
入 口 进 入 。 如 果 开 始 就 先 做 计算 机 站 的 专题 ， 想 必 手 机 版 的 内 容 将 是 一 个 移植 计算 机 妆 的 网 
页 ， 计 移动 疡 的 体验 大 打折 扣 。 


(9.4 总 结 扩展 


本 章 主 要 通过 实例 来 向 用 户 详细 介绍 移动 闫 网 站 UI 的 设计 方法 以 及 注意 事项 ， 布 望 用 
户 通 过 本 章 的 学 习 ， 可 以 对 移 副 问 网 站 设计 有 一 定 的 心得 体会 。 


移动 新 网 站 UI 设计 是 一 个 大 款 题 ， 这 里 只 是 为 用 户 讲解 其 中 的 基础 部 分 ， 布 望 用 户 在 
日 后 的 学 习 过 程 中 逐步 积累 ， 活 学 活用 基础 知识 。 通 过 多 读 、 多 学 、 多 看 和 多 练习 ， 提 高 对 
aim UI 设计 的 理解 ， 厚 积 薄 发 ， 制 作出 精美 的 网 页 设计 。 


















本 实例 制作 了 一 款 手机 端 网 页 宣传 窗 ， 该 实例 制作 方法 比较 简单 ， 主 要 是 和 素材 图 像 的 调整 和 
按钮 的 制作 ， 窗 口 整体 以 紫色 为 主 色 调 ， 搭 配 白色 的 文字 ， 文 字 清 晰 且 带 有 一 丝 神 秘 感 。 
源 文 件 地 址 : 源 文 件 \ 第 9 章 \ 移动 端 网 页 宣传 窗 . PSD 
视频 地 址 . 视频 \ 第 9 章 \ 移动 端 网 页 宣传 窗 . MP4 


工作 室 
工作 室 


创造 时 间 . 创造 时 间 


ES Ye si ! 你 好 ， 我 们 设计 了 移动 和 网 络 接口 
你 好 ， 我 们 设计 了 移动 和 网 络 接口 o r 


这 是 简单 的 使 用 。 


© 
ED 





3. 使 用 “ 横 排 文字 工具 ”输入 文字 。 。 4. 使 用 相同 方法 完成 其 他 内 容 的 制作 。 
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经 过 前 面 几 章 的 学 习 ， 相 信用 户 对 网 站 UI 设计 已 经 有 了 
一 定 的 了 解 ， 本 章 将 通过 制作 完整 的 UI 界 面 ， 为 用 户 详细 介 
绍 网 站 UI 的 设计 方法 和 一 些 注 意 事项 ， 
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w} 计算 机 端 视频 类 网 站 界面 





这 里 将 为 用 户 介绍 一 款 视 频 播放 类 网 站 的 界面 设计 ， 此 类 界面 设计 风格 多 样 ， 没 有 固 
定 的 设计 规 沁 ,通常 页 面 内 容 会 尝 扣 时 代 文 化 ， 并 帝 有 很 强 的 设计 感 。 视 频 类 网 页 界面 
的 通 性 就 是 视频 收集 ， 让 浏览 者 可 以 快速 找到 感 兴趣 的 视频 ， 是 此 类 网 站 的 设计 根本 。 


此 款 异 面 以 简洁 为 基础 ， 将 时 下 流行 的 局 平 化 风格 运用 在 网 页 界面 中 ， 整 体 界 面 运用 不 


同色 块 横向 切割 界面 ， 将 不 同类 型 的 内 容 分 别 放 置 在 不 同 的 色 块 中 ， 使 用 户 可 以 在 短 时 间 内 
找到 需要 的 内 容 。 

















此 款 界 面 以 白色 和 深蓝 色 作 为 主 色调 ， 辅 色 用 到 了 白色 和 红色 ， 这 种 搭配 给 浏 谢 者 一 种 
沉稳 冷静 的 感觉 ， 搭 配 时 代 文 化 可 以 使 浏览 者 更 加 相信 页 面 中 提供 信息 的 真实 性 。 


计算 机 端 视频 类 网 站 界面 一 一 顶部 


此 款 界 面 的 项 部 是 导航 栏 和 宣传 栏 的 制作 ， 以 简洁 明了 为 设计 核心 ， 以 白色 为 主 色 调 ， 
黑色 为 辅 色调 。 








使 用 到 的 技术 BEILA, WEIR, AHIR 
A 35 分 钟 
视频 \ 第 10 章 \ 计算 机 端 视频 类 网 站 界面 一 一 顶部. mp4 
源 文 件 地 址 源 文件 \ 第 10 章 \ 计算 机 端 视频 类 网 站 界面 . psd 
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《1 执行 “文件 > 新 建 ” 
命令 ， 设 置 如 图 10-1 所 : 
示 的 参数 。 单 击 工具 箱 中 : 
的 “和 矩形 工具 ”按钮 ， 
选择 “工具 模式 ”为 | 
“EAR”, AE RCB (0、 
0, 0) 的 形状 ， 如 图 10-2 : 


PR 


Um 
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10-1 10-2 


在 一 些 设计 中 ,为 了 更 精确 地 修改 文字 或 创建 路 径 ， 可 以 在 按 住 Ctrl 键 的 同时 按 + 
键 ， 将 画布 放大 再 进行 修改 。 相 应 的 ， 按 住 Ctrl 键 的 同时 按 - 键 ， 可 以 将 画布 缩小 ， 方 





便 观 察 整 体 效 果 。 


COJA- KRAER, 
将 其 拖 入 设计 文档 中 ,如 | 
图 103 所 示 。 使 用 相同 : 
方法 完成 相似 内 容 的 制 


作 ， 如 图 10-4 所 示 。 


(03 有 单 击 图 层面 板 底部 : 
的 “创建 新 的 填充 或 调整 : 
图 层 ” 按 钮 ， 在 弹出 的 下 | 
拉 菜 单 中 选择 “色彩 平 : 
衡 ” 选 项 ， 如 图 10-5 所 
示 。 继 续 选 择 “ 色 相 / 饱 
和 度 ” 和 “曲线 ”选项 , 


如 图 10-6 所 示 。 


(0 人 再 次 选择 “曲线 ” 
选项 ， 设 置 如 图 107 所 
示 的 参数 。 单 击 工具 箱 中 
的 “ 李 圆 工具 ”按钮 , : 
在 画布 中 绘制 RGB i 
(124, 126, 136) 的 圆 


形 ， 如 图 10-8 所 示 。 





103 10-4 


RENE 





10-7 10-8 
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《c 纪 修改 工具 选项 栏 中 
的 “路 径 操作 ”为 “ 合 : 
并 形状 ”选项 ， 在 画布 中 : Q 
绘制 RGB 相同 大 小 的 圆 | E p 

É, 如 图 10.9 所 示 。 使 | a 

用 相同 方法 完成 相似 内 容 | ii 
操作 ， 如 图 10-10 所 示 。 | 


(06 有 单 击 工具 箱 中 的 : 
“和 矩 形 工具 ”按钮 ， 在 画 : 
布 中 绘制 RGB (248, 、68 、 
68)， 如 图 10-11 所 示 。| 
打开 字符 面板 ， 设 置 如 
10-12 所 示 的 参数 。 


(007 有 有 单 击 工具 箱 中 的 : 
“ 横 排 文字 工具 ”按钮 ， 


在 画布 中 输入 如 图 10-13 . AE 
所 示 的 文字 。 继 续 打 开 字 | a 


符 面 板 ， 设 置 如 图 10-14 : - da A A T 
所 示 的 参数 。 | y k | si 7 1 Y 


《Ca 使 用 “ 横 排 文字 工 
具 ” 在 画布 中 输入 文字 ， 
如 图 10-15 所 示 。 单 击 图 : 
层面 板 底部 的 “添加 图 层 : 
样式 ”按钮 ， 在 弹出 的 
“图 层 样 式 ” 对 话 框 中 选 
择 “ 颜 色 亚 加 ”和 “ 投 图 10-15 图 10-16 
影 ” 选 项 ， 设 置 如 图 10- 

16 所 示 的 参数 。 


YU 提示 
投影 的 应 用 范围 很 广 ， 通 过 更 改 对 话 框 中 “距离 ” 值 的 大 小 ， 可 以 实现 图 形 悬 空 或 








者 紧 贴 背景 的 效果 。 


—o 02 0 





《9] 单 击 “ 确 定 ” 按 钮 ， 


图 像 效 果 如 图 10-17 所 
示 。 使 用 相同 方法 完成 相 : 
似 内 容 的 制作 ， 导 航 菜单 : 
像 效 果 如 图 10-18 i 


所 示 。 


U 提示 





10-17 





EI 计算 机 端 网 站 UI 设计 
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TABLET 








此 网 页 的 导航 栏 已 被 隐藏 ， 正 常情 况 下 如 果 网 页 在 运行 状态 中 ， 单 击 顶 部 左上 角 的 


设置 按钮 ， 将 会 弹出 被 隐藏 的 手 航 栏 。 





QAH 计算 机 端 视频 类 网 站 界面 一 一 主体 


作为 员 面 的 主体 部 分 ， 网 站 的 核心 内 容 都 在 此 处 体现 ， 此 款 界 面 以 局 平 化 为 设计 基础 ， 界 面 
能 快速 寻找 到 需要 的 内 容 。 


PE ai 


整体 布局 清晰 ， 图 片 展示 和 文字 说 明 布 局 合理 ， 使 浏览 





使 用 到 的 技术 
学 习 时 间 


001 有 继续 上 一 个 实例 , 单 
击 工具 箱 中 的 “ 直 排 文字 : 
工具 ”按钮 ， 在 画布 中 输 : 
入 如 图 10-19 所 示 的 文字 。 
单 击 工具 箱 中 的 “直线 工 : 
具 ” 按 钮 ， 在 画布 中 绘制 : 
RGB (248, 68, 68) 的 直 


线 ， 如 图 10-20 所 示 。 


EIR, 
30 分 钟 





10-19 





A i A 


EN j při bii e 


CAREFULLY CRAFTED 


REFA, ME 


— CAREFULLY CRAFTED BY UIS TEAM 


10-20 
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02 有 打开 字符 面板 ， 设 : 
置 如 图 10-21 所 示 的 参 
数 。 单 击 工具 箱 中 的 “ 横 : 
排 文字 工具 ”按钮 ， 在 画 
布 中 输入 相应 文字 ， 如 图 : 
10-22 所 示 。 


ENHANCEYOUR DESIGN AND 
MAKE YOU LOOK LIKE SKILLED WARRIOR 


10-22 





rT 


03 有 打开 字符 面板 ， 设 : 
置 如 图 10-23 所 示 的 2 种 : 
不 同 的 参数 。 单 击 工 具 箱 
中 的 “ 横 排 文字 工具 ”: 
按钮 ， 在 画布 中 输入 相应 | 
文字 ， 如 图 10-24 所 示 。 | 


TÍ 14 点 
VÍA 度量 标准 





10-24 


《co4] 使 用 相同 方法 完成 

相似 内 容 操 作 ， 如 图 10-25 ; | 

所 示 。 单 击 工具 箱 中 的 | | 罕 : = 
GERIR” RH, EE. 

HPA ABBR a 
如 图 10-26 所 示 。 


ENHANCE YOUR DESIGN AND -MAKE YOU LOOK LIKE SKILLED WARRIOR 





10-25 10-26 


(05 有 打开 一 张 素材 图 像 ， 
使 用 “移动 工具 ”将 素 : 
材 图 像 移 动 到 设计 文档 : 
中 ， 并 为 其 添加 剪贴 蒙 
版 ， 如 图 10-27 所 示 。 使 
用 “ 椭 贺 工具 ”在 画布 中 i; 25 
绘制 一 个 填充 无 描 边 为 


白色 的 圆 环 ， 如 图 10-28 
所 示 10-27 10-28 


ENHANCE YOUR DESIGN AND 
MAKE YOU LOOK LIKE SKILLED WARRIOR 








《co6 使 用 相同 方法 完成 
相似 内 容 操 作 ， 如 图 1029 . 
所 示 。 单 击 工具 箱 中 的 
“和 矩形 工具 ”按钮 ， 在 画 : 
布 中 绘制 宽 、 高 为 1440 x | 
600 像素 并 且 填 充 为 RGB | 
(44、46、55) 的 矩形， 


如 图 10-30 所 示 。 


人 07 有 打开 字符 面板 ， 设 : 
2108 1031 所 示 的 参 
数 。 单 击 工具 箱 中 的 “ 横 : 
排 文字 工具 ”按钮 ， 在 画 : 
布 中 输入 相应 设置 的 文 | 
字 ， 文 字 效果 如 图 10-32 | 


所 示 。 


U 提示 








10-31 
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10-30 


LATEST PROJECTS 


10-32 





由 于 篇 幅 的 关系 ， 此 处 的 素材 采用 整体 导入 ， 在 实际 操作 时 ， 照 片 应 根据 需要 分 别 


导入 ， 这 样 可 以 减少 后 期 制作 的 工作 量 。 





(diras: 
SETA” Èt, CE. 
布 中 绘制 RGB (248, 68, | 
68) 的 矩形， 如 图 10-33 | 
所 示 。 打 开 字 符 面板 , 设 : 
置 参数 ， 使 用 “ 横 排 文字 | 
工具 ”在 画布 中 输入 文 


字 ， 如 图 10-34 所 示 。 


ko9 使 用 相同 方法 完成 
相似 内 容 操 作 ， 如 图 10-35 | 
所 示 。 使 用 “和 矩形 工具 ” 
在 画布 中 绘制 一 个 矩形 ， 
打开 一 张 图 像素 材 ， 使 用 
“移动 工具 ”将 素材 图 像 | 
拖 入 到 设计 文档 中 ， 并 为 : 
其 添加 剪贴 蒙 版 如: 


10-36 所 示 。 


LATEST PROJECTS 





10-33 


LATEST PROJECTS 


10-35 


LATEST PROJECTS 


ag Sy TT on mS ae m e 
fi ia aa 
Ela ; 


10-34 
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[OD 使 用 “矩形 工具 ”| 
和 “多 边 形 工具 ”在 画 
布 中 绘制 白色 的 形状 ， 如 : 
图 10-37 所 示 。 使 用 相同 : 
方法 完成 相似 内 容 的 制 : 
E, 图像 效果 如 图 1038 : 
所 示 。 





10-37 10-38 


Gorras, 设 
置 面板 上 的 各 项 参数 ， 如 
10-39 所 示 。 再 次 打开 | 
字符 面板 ,设置 如 图 10- 
40 所 示 的 参数 。 


美国 英语 





10-39 10-40 


CJE AALI. 
具 ” 在 画布 中 输入 相应 文 : 
F, 效果 如 图 10-41 所 
To ER MATA”: 
在 画布 中 绘制 圆 形 ， 更 改 | 
工具 选项 栏 中 的 “路 径 操 : 
作 ” 为 “ 减 去 顶层 形状 ” E os 
选项 ,使 用 “和 矩形 工具 ”| 

在 画布 中 进行 绘制 ， 如 图 : 

10-42 所 示 。 | 


CASE STUDIES 





iE 





a 





人 3 使 用 “ 自 定形 状 工 
具 ” 在 画布 中 绘制 形状 ， 
使 用 “ 横 排 文字 工具 ”| 
在 画布 中 输入 文字 , 如 
图 10-43 所 示 。 按 照 前 面 : 
9 步 又， 使 用 相同 方法 完 
成 网 页 相似 模块 的 制作 ，: 
如 图 10-44 所 示 。 : 10-43 10-44 





-00 0 
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7 实例 ”计算 机 端 视 频 类 网 站 界面 一 一 底部 


该 界面 的 底部 包括 合作 伙伴 和 版 底 内 容 ， 此 蒜 界 面 并 疫 有 在 这 方面 进行 创新 ， 依 旧 闪 用 
原始 的 风格 ， 在 保证 整体 界面 效果 的 基础 上 ， 将 深蓝 色色 块 放 置 在 界面 底部 ， 平 衡 整 个 界面 





EE. 
pa as 


A = Mu par 


SE i 
a 
2 SE o Ai BEE) ~e ii 4 e NARA 
E A ES 
e : E Y IED o a a e Si pen 


-一 一 - A 


使 用 到 的 技术 RETA, MATA, KERES 
A > 


视频 地 址 视频 \ 第 10 LA 计算 机 病 视 频 类 网 站 界面 一 一 底部 . mp4 
产 文 件 地 址 源 文 件 \ 第 10 章 \ 计算 机 关 视 频 类 网 站 界面 . psd 















《KG 使 用 “和 矩形 工具 ” 
在 画布 中 绘制 黑色 和 白色 : 
的 矩形 ， 如 图 10- 45 所 
To 执行 “文件 > 打开 ” 
FS, 打开 一 张 素材 图 : 
像 ， 将 素材 图 像 拖 入 到 设 
计 文档 中 ,适当 调整 图 像 : 图 10.45 O 
的 位 置 和 大 小 ， 图 像 效 果 : 

如 图 10-46 所 示 。 ! 


(6 打开 字符 面板 ， 设 
置 相 关 参 数 ， 使 用 “ 横 排 : 





Tres ws h arica Es 
FIA” AAA: MS n m 
文字 ， 如 图 10-47 所 示 。 PS Ta ra Sol 
使 用 相同 方法 完成 相似 操 : EOR pos Refund Poli 


作 ， 如 图 10-48 所 示 。 





10-47 10-48 
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(3 了 使 用 “ 横 排 文字 工 
具 ” 在 画布 中 输入 文字 ， 
参数 设置 如 图 10-49 所 ; 辆 
示 。 使 用 “形状 工具 ” 
和 “文字 工具 ”绘制 登 
录 框 ， 如 图 10-50 所 示 。 | 


JOIN OUR NEWSLETTER 


Join up and get notified about new products, updates and special offers. 
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U 提示 





果 突 出 的 颜色 、 


《0 人 4 完成 所 有 操作 , 网 3 
页 底部 效果 如 图 10-51 所 a 
示 。 打 开 图 层面 板 ， 调 整 : he Ws mos 
图 层 顺序 并 整理 图 层 为 其 
编组 ， 如 图 10.52 所 示 。 | 





10-51 10-52 
U 提示 
制作 网 页 的 布局 要 有 新 意 ， 色 彩 搭配 要 明快 ， 合 理 排版 才能 吸引 浏览 者 ， 
顾 视 觉 的 造型 和 美学 的 创造 性 ， 以 突出 设计 中 的 各 个 构成 要 素 。 








(102 LS O MC 0 
目前 各 式 各 样 的 网 络 游戏 吸引 痢 越 来 越 多 的 用 户 。 近 些 年 来 ， 大 量 网 络 游戏 涌 入 游戏 市 
场 ， 各 式 各 样 的 游戏 网 页 界面 吸引 着 每 位 玩家 的 眼球 。 
10.2.1 界面 分 析 
此 款 界 面 是 一 款 网 络 游戏 界面 ， 通 常情 况 下 网 游 界 面 风格 会 走 爽 个 极端 ， 要 么 是 炫目 将 


上 腿 ， 要 么 是 阴沉 黑暗 ， 此 款 界面 的 风格 属于 后 者 。 通 过 深 色调 和 大 量 图 片 的 运用 ， 使 整体 寞 
面 阴沉 且 富 有 杀气 ， 符 合 枪战 类 网 游 的 设计 理念 。 


-6 2608 6 
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10.2.2 色彩 分 析 


此 款 界面 采用 深蓝 色 作为 主 色 调 ， 使 用 少量 红色 和 青色 进行 点 缀 ， 各 种 深蓝 和 浅 蓝 的 运 
用 将 阴沉 的 氛围 泻 染 得 很 好 ， 整 个 画面 充满 了 大 战 将 来 临 的 紧张 氛围 。 


QER 计算 机 端 帅 气 游戏 网 站 一 一 顶部 


此 款 界面 的 顶部 紧 扣 设计 核心 ， 以 蓝 色 为 主 色调 ， 白 色 和 红色 为 辅 色调 ， 突 出 枪战 类 网 
游 的 紧张 气氛 ， 通 过 图 片 和 图 形 的 应 用 ， 使 整体 界面 极 富 设计 感 。 








a 

i aay _ + 
O fA 
E 时. 高 - \ 
(= PK i det PR 
Fa Us Te 
(5) _D) . 

/1 \ / 


Sy hz 
《 )》 


我 是 实力 派 





信用 到 的 技术 
学 习 时 间 
视频 \ 第 10 章 \ 计算 机 端 帅 气 游戏 网 站 一 一 顶部 . mp4 
源 文件 \ 第 10 章 \ 计算 机 端 帅 气 游戏 网 站 . psd 
(0 执行 “文件 > 打开 ”| 
命令 ,打开 素材 “素材 > : 
第 10 Æ > 102201. png”, : 
像 效果 如 图 10-53 所 示 。 单 
击 工具 箱 中 的 “和 矩形 工具 ”: 
按钮 ， 在 画布 中 绘制 黑色 : 
矩形， 如 图 10-.54 所 示 。 








41 10-53 10-54 
人 (02 有 更 改 图 层 “ 不 透明 : 
度 ” 为 50% ， 图 像 效果 | 
如 图 10-55 所 示 。 使 用 相 | 
同方 法 完成 相似 内 容 的 制 : 
作 ， 图 像 效 果 如 图 10-56 : 
所 示 。 
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UU 提示 
绘制 黑色 半 透 明 矩 形 的 方法 很 多 ， 可 以 使 用 “和 珑 形 选 框 工 具 ” 绘 制 选区 后 填充 黑 
色 ， 更 改 图 层 “ 不 透明 度 ” 为 $0% ， 也 可 以 使 用 “和 纶 形 工 具 ” 绘 制 黑 色 短 形 ， 在 选项 
栏 中 设置 “不 透明 度 ” 为 30% 。 





ko3 单 击 工具 箱 中 的 : 
“ 横 排 文字 工具 ”按钮 ， 
在 画布 中 输入 如 图 10-57 ; 
所 示 的 文字 。 单 击 工具 箱 : 
中 的 “直线 工具 ”按钮 ， 
设置 线条 粗细 为 1 像素 ， 
在 画布 中 绘制 白色 直线 ， 
如 图 10-58 所 示 。 | 10-57 10-58 


Um 
使 用 “直线 工具 ”绘制 的 直线 默认 宽 为 1 像素 宽 自 定 或 是 高 为 1 RRAZ, EA 








直线 的 粗细 ， 可 以 更 改 直 线 的 宽度 ， 也 可 以 修改 粗细 选项 框 里 的 数值 。 





(4 单 击 图 层面 板 底部 的 
“添加 图 层 样式 ”按钮 , 在 | 
弹出 的 “图 层 样式 ”对 话 
框 中 选择 “外 发 光 ” 选 项 , | 
设置 如 图 10-59 所 示 的 参 | 
数 。 使 用 相同 方法 完成 相 | 
似 内 容 的 制作 ， 图 像 效 果 : 图 10-59 图 10-60 
如 图 10-60 所 示 。 | 

U ER 
图 层 样式 中 的 “外 发 光 ” 和 “内 发 光 ” 选 项 ， 在 网 页 设计 中 应 用 范围 很 广泛 ， 都 可 














以 为 图 层 添 加 发 光 效 果 。 


(o) 将 相关 图 层 编组 ， 
SMA “EN”, W: 
图 10-61 所 示 。 单 击 工具 
箱 中 的 “和 矩形 工具 ” 按 | 
e O 
(0, 40, 106) WK, 
如 图 10-62 所 示 。 





10-61 10-62 
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U 提示 
选择 相应 的 图 层 ， 执 行 “图 层 > 编组” 命令， 可 将 所 选 图 层 进行 编组 。 或 者 打开 图 
层面 板 ， 单 击 “ 新 建 组 ”按钮 ， 再 将 相应 的 图 层 移入 到 组 中 ， 实 现 编 组 操作 。 





《c6 使 用 “ 横 排 文字 工 : 
具 ” 在 画布 中 输入 如 那些 惊人 的 技巧 
10-63 所 示 的 文字 。 单 orate 
击 工具 箱 中 的 “多 边 形 工 : 
具 ” 按 钮 ， 在 画布 中 绘制 ， Ton 
如 图 10-64 所 示 的 正六 : ade 


AA E | 美国 英语 „Jaa FER 
: SN 


w 一 


Gi aja] e ES 





10-63 10-64 





《c7 单 击 图 层面 板 庆 部 : 
的 “添加 图 层 样式 ” 按 
钮 ， 在 弹出 的 “图 层 样 : 
式 ” 对 话 框 中 选择 “外 发 
光 ” 选 项 ， 设 置 如 图 10- 上 
65 所 示 的 人 参数。 使 用 相 : 
同方 法 完成 相似 内 容 的 制 | 
作 ， 图 像 效 果 如 图 10-66 : 10-65 10-66 
所 示 。 | 


(08) TR 
“多 边 形 工具 ”按钮 ， 在 
画布 中 绘制 如 图 10-67 所 : 
TEAK, 执行 “图 
层 > 栅 格 化 > 形状 ”命令 
栅 格 化 图 层 ， 单 击 工具 : 
箱 中 “橡皮 工具 ”， 控 除 
部 分 内 容 ， 图 像 效 果 如 
10-68 所 示 。 10-67 10-68 














U RR 
RATA MLA” USARLA, ATEA A A E 





LA” BAMAR, a A? PARMA 


o 971 一 
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人 (09 有 单 击 图 层面 板 底部 : 
的 “添加 图 层 样式 ” 按 
包 ， 在 弹出 的 “图 层 样 
式 ” 对 话 框 中 选择 “ 颜 : 
eS” MM, MEW: 
10-69 所 示 的 参数 。 使 | 
用 相同 方法 完成 相似 内 : 
容 的 制作 ， 图 像 效 果 如 : 
图 10.70 所 示 。 





页 

















冬 10-69 | 10-70 








(10 有 单 击 工具 箱 中 的 
“ 横 排 文 字 工具 ”按钮 ， 
在 画布 中 输入 如 图 10-71 ; 
所 示 的 文字 。 将 相关 图 层 : 
编组 ， 复 制图 层 组 并 移动 : 
到 适当 的 位 置 ， 图 像 效果 : 
如 图 10.72 所 示 。 





名 10-72 








(JJ 单 击 工 具 箱 中 的 : 
“ 横 排 文字 工具 ”按钮 ， 
在 画布 中 输入 如 图 10-73 | 
所 示 的 文字 。 单 击 工具 箱 : 
中 的 “和 矩形 工具 ”按钮 ， 
在 画布 中 绘制 黑色 和 拢 
E, HARE “TAR | 
度 ” 为 50% ， 图 像 效 果 : | 
如 图 10-747, Z| 10-73 2 10-74 


1D EAS 
的 “添加 图 层 样式 ” 按 : 
钮 ， 在 弹出 的 “图 层 样 
式 ” 对 话 框 中 选择 “外 发 : 
JE” EM, MEME 10- 
IS 所 示 的 参数 。 使 用 相 | 
同方 法 完成 相似 内 容 的 制 ; 
作 ， 图 像 效 果 如 图 10-76 : 到 10-75 到 10-76 
所 示 。 
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CETRA HA 
排 文字 工具 ”按钮 ， 在 画 
布 中 输入 如 图 10-77 所 示 的 
文字 。 使 用 相同 方法 完成 
其 他 文字 的 输入 ， 图 像 效 


果 如 图 10-78 所 示 。 





(4 有 单 击 工具 箱 中 的 “ 甜 
形 工具 ”按钮 ， 在 画布 中 : 
绘制 如 图 10-79 所 示 的 矩 : 
形 。 使 用 相同 方法 完成 相 
似 内 容 的 制作 ， 图 像 效果 


如 图 10-80 所 示 。 


05 有 单 击 工 具 箱 中 的 “ 甜 
形 工 具 ” 按 钮 ， 在 画布 中 
绘制 RGB (66, 112, 192) ` 
的 矩形 ， 如 图 10- 81 所 示 。 
单 击 图 层面 板 底部 的 “ 添 : 
加 图 层 样式 ”按钮 ， 在 漳 
出 的 “图 层 样 式 ” 对 话 
框 中 选择 相应 选项 ， 设 置 





如 图 10-82 所 示 的 参数 。 


《G6J 单 击 工具 箱 中 的 “ 模 
排 文字 工具 ”按钮 ， 在 画 
布 中 输入 如 图 10-83 所 示 : 
的 文字 。 将 相关 图 层 编 
组 ， 图 层面 板 如 图 10-84 ; 


ATAR, 








A 


我 是 实力 派 





页 








10-77 





我 是 实力 派 


我 掌握 以 下 狙击 方式 
O Mia ERE 


db: 一 285 
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冬 10-78 











我 掌握 以 下 狙击 方式 


O AE O 58 
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我 是 实力 派 


我 掌握 以 下 狙击 方式 


o 闪 狙 口 Ae 038 O 4B O BE 
O +38 





冬 10-83 











$ 10-82 


oT n a 
~ NAAR: 100% ~ 


站 p H > RA: 100% ~ 


高 手 

01 持 风 6 
01 拷贝 5 
013501 4 
013501 3 
01 拷贝 2 
01180 
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Um 
为 了 方便 后 面 的 页 面 进行 修改 ， 每 个 图 像 占 一 个 图 层 ， 最 后 会 





关 图 层 编 组 ， 方 便 管理 和 查找 每 个 元 素 。 


QEA 计算 机 端 帅气 游戏 网 站 一 一 底部 


此 款 界 徊 的 底部 风格 与 项 部 相同 ， 同 样 以 蓝 色 为 主 色调 ,红色 为 辅 色调 ,为 突出 “ 立 
即 领取 ”， 采 用 了 红色 作为 按钮 颜色 ， 外 反光 效果 的 使 用 为 整体 界面 提升 了 设计 感 。 





WA RS 





使 用 到 的 技术 图 层 样式 EIR, BHEIL 

>) Ey 8] 30 分 钟 

视频 地 址 视频 \ 第 10 章 \ 计算 机 痛 昨 气 游戏 网 站 一 一 底部 . mp4 
源 文件 地 址 源 文件 \ 第 10 章 \ 计算 机 端 帅 气 游戏 网 站 . psd 














C6 继续 上 一 个 实例 。 
AETAT “EEI: 
具 ” 按 钮 ， 在 画布 中 绘制 : 
LOPERA RE “T: 
透明 度 ” 为 50%， 如 = 
图 10-85 所 示 。 单 击 图 层 : s 一 : 
面板 底部 的 “添加 图 层 : Das 
样式 ”按钮 ， 在 弹出 的 
“图 层 样 式 ” 对 话 框 中 选 : 
F ARA? AR, E 
置 如 图 10- 86 所 示 的 | 
参数 。 
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《co33 使 用 相同 方法 完成 
相似 内 容 的 制作 ， 图 像 效 : 
果 如 图 10-87 所 示 。 单 击 : 
工具 箱 中 的 “ 横 排 文字 工 : 
具 ” 按 钮 ， 在 画布 中 输入 : 


如 图 10-88 所 示 的 文字 。 


《3 使 用 相同 方法 完成 
相似 内 容 的 制作 ， 图 像 效 : 
果 如 图 10-89 所 示 。 单 击 : 
工具 箱 中 的 “和 矩形 工具 ”: 
按钮 ， 在 画布 中 绘制 如 图 ， 


10-90 所 示 的 矩形 。 


人 04 有 使 用 相同 方法 完成 相 
似 内 容 的 制作 ， 图 像 效 果 
如 图 10-91 所 示 。 执行 “ 文 | 
件 > 打 开 ” 命 令 , 打开 素 : 
材 “ 素 材 > 第 10 章 > i 
102202. png ~ 102207. png”, ` 
将 素材 图 像 拖 入 到 设计 文 : 
档 中 ， 适 当 调整 图 像 的 大 
小 和 位 置 ， 图 像 效 果 如 图 : 


10-92 所 示 。 


CJ 单 击 工具 箱 中 的 
“ 横 排 文字 工具 ”按钮 ， 
在 画布 中 输入 如 图 10-93 : 


所 示 的 文字 。 单 击 工 具 箱 


中 的 “矩形 工具 ” 按 
钮 ， 在 画布 中 绘制 RGB 
(166, 45, 45) BUFEJE, | 


如 图 10-94 所 示 。 
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10-89 10-90 





10-91 10-92 





10-93 10-94 
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06 有 单 击 图 层面 板 底部 : 
的 “添加 图 层 样式 ” 按 : 
钮 ， 在 弹出 的 “图 层 样 : 
式 ” 对 话 框 中 选择 “内 


阴影 ”选项 ， 设 置 如 


所 示 的 参数 。 继 续 ， 
选择 “内 发 光 ” 选 项 ,i 


设置 如 所 示 的 
人 参数。 | 


TE E fa AO 


所 示 的 文字 。 使 用 相同 方 ， 
法 完成 相似 内 容 的 制作 ，: 


图 像 效 果 如 
所 示 。 


08 有 将 相关 图 层 编组 : 
重 命名 为 “活动 "， 图 层 : 
面板 如 | 所 示 。 单 : 
FIAR GET: 
具 ” 按 钮 ， 在 画布 中 绘制 | 
REEE, FRERE, 
“不 透明 度 ” 为 50% ,图 


IRIRAN 所 示 。 


09 朋 单 击 工具 箱 中 的 “ 横 : 
排 文 字 工具 ”按钮 ， 在 画 : 


布 中 输入 如 所 示 
的 文字 。 将 相关 图 层 编组 ， 


图 层面 板 如 所 示 。 | 


» 276 


07 用 单 击 工 具 箱 中 的 
“ 横 排 文字 工具 ”按钮 ， 























Y 不 透明 度 : 100% ~ 


t O 8 ÑA: 100% ~ 


"mo Tr ne 
ww HERE: 100% ~ 
he: E Y t DO B BA: 100% y 
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网 页 设计 没有 捷径 可 走 ， 只 有 通过 多 学 习 和 多 练习 ， 才 能 掌握 设计 的 精通 。 多 去 吸取 成 
功 设 计 的 经 验 ， 多 动脑 思考 ， 才 能 制作 出 精美 的 网 页 。 


10.3.1 设计 网 页 之 前 需要 做 什么 


一 名 好 的 网 页 设计 师 ， 在 做 网 页 设计 之 前 ， 会 先 了 解 客户 的 要 求 。 

@ 建设 网 站 的 目的 、 栏 目 规划 及 每 个 栏目 的 表现 形式 和 功能 要 求 。 

O 网 站 主体 色调 、 客 户 性 别 喜好 、 联 系 方式 、 旧 版 网 址 和 偏好 网 址 。 

O 根据 行业 和 客户 要 求 ， 哪 些 要 着 重 表现 。 

@ 是 否 分 期 建设 、 考 虑 后 期 的 兼容 性 。 

O 设计 网 站 的 类 型 。 
10.3.2 网 页 设计 的 发 展 趋势 是 什么 

网 页 设计 是 一 个 不 断 更 新 换代 、 推 陈 出 新 的 行业 ， 它 要 求 设 计 师 们 必须 随时 把 握 最 新 的 
设计 趋势 ， 从 而 确保 自己 不 被 这 个 行业 所 淘汰 。 就 目前 的 流行 趋势 而 言 ， 日 后 网 页 设计 主要 
流行 方向 是 响应 式 设 计 、 局 平 化 设计 、 无 限 滚动 、 单 页 、 固 定 标 头 、 大 胆 的 颜色 、 更 少 的 按 
钮 和 更 大 的 网 页 宽度 。 


总 结 扩 展 


通过 本 章 完 成 网 页 界面 的 制作 ， 相 信用 户 对 网 站 界面 设计 有 了 一 定 的 了 解 ， 在 日 后 的 学 
习 ， 工 作 中 逐步 积累 经 验 ， 以 便 制作 出 更 加 精美 的 网 页 。 


10.4.1 本 章 小 结 








用 中 规 中 和 矩 的 方式 设计 网 页 虽然 不 容易 体现 设计 感 ， 但 却 可 以 避免 初学 者 犯 一 些 错误 。 
10.4.2 举一反三 一 一 制作 计算 机 端 网 页 宣传 栏 


本 实例 制作 了 一 款 电 商 网 站 的 宣传 栏 ， 该 实例 的 制作 难点 在 图 片 四 周边 框 效 果 的 制作 ， 
需要 细心 、 耐 心 ， 通 过 重复 复制 并 调整 图 形 等 操作 完成 边框 的 制作 。 
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源 文件 地 址 . 源 文 件 \ 第 10 章 \ 制作 计算 机 端 网 页 宣传 栏 . 
视频 地 址 . 视频 \ 第 10 章 \ 制作 计算 机 端 网 页 宣传 栏 . MPA 


2016 235% 
开创 电 商 新 纪元 
会 员 制 全 莒 销 渠道 ， 开 放 式 、 创新 型 、 全 民 创业 平台 
引 倾 传统 行业 智能 互联 升级 笛 立 多 元 化 电 商 创新 标 生 | 主 


来 吧 ， 与 我 们 一 起 飞 吧 ! 


E 2 绘制 矩形 调整 图 层 “ 不 透明 度 ” 并 输入 相应 
L 执行 “文件 > 打开 ”命令 ， 打 开 素材 图 像 。 | ~ 并 输入 相应 


O 


2016 tz 2016 RRA 
开创 电 商 新 纪元 ; 开创 电 商 新 纪元 ; 
Dea 4 、 全 民 创 业 平和 全 i 会 员 制 全 营销 渠道 ， 开 全 民 创业 平 舍 三 


创新 标杆 


irá 


3. 使 用 “钢笔 工具 ”绘制 路 径 ， 转 换 为 选区 并 4 使 用 相同 方法 完成 其 他 内 容 的 制作 ， 并 将 相关 
进行 填充 。 图 层 编组 。 
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